ag-grid is proud to partner with webpack

exports-loader

Allow to setup exports module.exports/export for source files.

Useful when a source file does not contain exports or something does not export.

⚠ Be careful, existing exports (export/module.exports/exports) can break the source code or be overwritten.

⚠ By default loader generate ES module named syntax.

Getting Started

To begin, you'll need to install exports-loader:

$ npm install exports-loader --save-dev

Inline

Then add the loader to the desired require calls. For example:

import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
// Adds the following code to the file's source:
//
// export { myFunction }

myFunction('Hello world');

import {
  myVariable,
  myFunction,
} from 'exports-loader?exports[]=myVariable&exports[]=myFunction!./file.js';
// Adds the following code to the file's source:
//
// export { myVariable, myFunction };

const newVariable = myVariable + '!!!';

console.log(newVariable);

myFunction('Hello world');

import { file } from 'exports-loader?[name]!./file.js';
// Adds the following code to the file's source:
//
// export { file };

file('string');

const {
  myFunction,
} = require('exports-loader?type=commonjs&exports=myFunction!./file.js');
// Adds the following code to the file's source:
//
// module.exports = { myFunction }

myFunction('Hello world');

import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// exports default myFunction;

myFunction('Hello world');

const myFunction = require('exports-loader?type=commonjs&exports=single%20myFunction!./file.js');
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// module.exports = myFunction;

myFunction('Hello world');

import { myFunctionAlias } from 'exports-loader?exports=named%20myFunction%20myFunctionAlias!./file.js';
// `%20` is space in a query string, equivalently `named myFunction myFunctionAlias`
// Adds the following code to the file's source:
//
// exports { myFunction as myFunctionAlias };

myFunctionAlias('Hello world');

Description of string values can be found in the documentation below.

Using Configuration

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // You can use `regexp`
        // test: /vendor\.js/$
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'myFunction',
        },
      },
    ],
  },
};

And run webpack via your preferred method.

Options

Name	Type	Default	Description
Name Type Default Description `type` `{String}`	`{String}`	`module`	Format of generated exports
Name Type Default Description `exports` `{String\\|Array}`	`{String\\|Array}`	`undefined`	List of exports

`type`

Type: String Default: module

Format of generated exports.

Possible values - commonjs (CommonJS module syntax) and module (ES module syntax).

`commonjs`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'Foo',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

module.exports = { Foo };

`module`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'module',
          exports: 'Foo',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

export { Foo };

`exports`

Type: String|Array Default: undefined

List of exports.

`String`

`Syntax`

String values let you specify export syntax, name, and alias.

String syntax - [[syntax] [name] [alias]], where:

[syntax] can be default or named for the module type (ES modules module format), and single or multiple for the commonjs type (CommonJS module format) (may be omitted)
[name] - name of exported value (required)
[alias] - alias of exported value (may be omitted)

Examples:

[Foo] - generates ES module named exports and exports Foo value.
[default Foo] - generates ES module default export and exports Foo value.
[named Foo FooA] - generates ES module named exports and exports Foo value under FooA name.
[single Foo] - generates CommonJS single export and exports Foo value.
[multiple Foo FooA] - generates CommonJS multiple exports and exports Foo value under FooA name.
[[name]] - generates ES module named exports and exports a variable equal to the filename, for single.js it will be single.
[named [name] [name]Alias] - generates ES module named exports and exports a value equal to the filename under other name., for single.js it will be single and singleAlias

⚠ You need to set type: "commonjs" to use single or multiple syntax.

⚠ Aliases can't be used together with default or single syntax.

Examples

ES Module Default Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'default Foo',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

export default Foo;

ES Module Named Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'named Foo FooA',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

export { Foo as FooA };

CommonJS Single Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'single Foo',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

module.exports = Foo;

CommonJS Multiple Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'multiple Foo FooA',
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

module.exports = { FooA: Foo };

`Array`

Allow to specify multiple exports.

⚠ Not possible to use single and multiple syntaxes together due to CommonJS format limitations.

⚠ Not possible to use multiple default values due to ES module format limitations.

⚠ Not possible to use multiple single values due to CommonJS format limitations.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: ['Foo', 'named Bar BarA'],
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

export { Foo, Bar as BarA };

Examples

CommonJS Multiple Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: ['Foo', 'multiple Bar', 'multiple Baz BazA'],
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

module.exports = { Foo, Bar, BazA: Bar };

ES Module Default Export And Named Exports Together

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: ['default Foo', 'named Bar BarA'],
        },
      },
    ],
  },
};

Generate output:

// ...
// Code
// ...

export default Foo;
export { Bar as BarA };

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT