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.
For further hints on compatibility issues, check out Shimming of the official docs.
⚠ By default loader generate ES module named syntax.
⚠ Be careful, existing exports (export
/module.exports
/exports
) in the original code and exporting new values can cause a failure.
Getting Started
To begin, you'll need to install exports-loader
:
$ npm install exports-loader --save-dev
Inline
The |
or %20
(space) allow to separate the syntax
, name
and alias
of export.
The documentation and syntax examples can be read here.
⚠ %20
is space in a query string, because you can't use spaces in URLs
Then add the loader to the desired import
statement or require
calls. For example:
import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
myFunction('Hello world');
import {
myVariable,
myFunction,
} from 'exports-loader?exports[]=myVariable&exports[]=myFunction!./file.js';
const newVariable = myVariable + '!!!';
console.log(newVariable);
myFunction('Hello world');
import { file } from 'exports-loader?[name]!./file.js';
file('string');
const {
myFunction,
} = require('exports-loader?type=commonjs&exports=myFunction!./file.js');
myFunction('Hello world');
import myFunction from 'exports-loader?exports=default|myFunction!./file.js';
myFunction('Hello world');
const myFunction = require('exports-loader?type=commonjs&exports=single|myFunction!./file.js');
myFunction('Hello world');
import { myFunctionAlias } from 'exports-loader?exports=named|myFunction|myFunctionAlias!./file.js';
myFunctionAlias('Hello world');
Description of string values can be found in the documentation below.
Using Configuration
webpack.config.js
module.exports = {
module: {
rules: [
{
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 |
---|
type | {String} | module | Format of generated exports |
exports | {String|Object|Array<String|Object>} | 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:
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:
export { Foo };
exports
Type: String|Array
Default: undefined
List of exports.
String
Allows to use a string to describe an export.
Syntax
The |
or %20
(space) allow to separate the syntax
, name
and alias
of export.
String syntax - [[syntax] [name] [alias]]
or [[syntax]|[name]|[alias]]
, where:
-
[syntax]
(may be omitted) -
- if
type
is module
- can be default
and named
, - if
type
is commonjs
- can be single
and multiple
-
[name]
- name of an exported value (required)
-
[alias]
- alias of an exported value (may be omitted)
Examples:
[Foo]
- generates export { Foo };
.[default Foo]
- generates export default Foo;
.[named Foo]
- generates export { Foo };
.[named Foo FooA]
- generates export { Foo as FooA };
.[single Foo]
- generates module.exports = Foo;
.[multiple Foo]
- generates module.exports = { Foo };
.[multiple Foo FooA]
- generates module.exports = { 'FooA': Foo };
.[[name]]
- generates ES module named exports and exports a variable equal to the filename, for single.js
it will be single
, generates export { 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
, generates export { single as singleAlias };
.
⚠ You need to set type: "commonjs"
to use single
or multiple
syntaxes.
⚠ Aliases can't be used together with default
or single
syntaxes.
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:
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:
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:
module.exports = Foo;
CommonJS Multiple Exports
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/vendor.js'),
loader: 'exports-loader',
options: {
type: 'commonjs',
exports: 'multiple Foo FooA',
},
},
],
},
};
Generate output:
module.exports = { FooA: Foo };
Object
Allows to use an object to describe an export.
Properties:
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 an exported value (required)alias
- alias of an exported value (may be omitted)
Examples
ES Module Default Export
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/vendor.js'),
loader: 'exports-loader',
options: {
exports: {
syntax: 'default',
name: 'Foo',
},
},
},
],
},
};
Generate output:
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: {
syntax: 'named',
name: 'Foo',
alias: 'FooA',
},
},
},
],
},
};
Generate output:
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: {
syntax: 'single',
name: 'Foo',
},
},
},
],
},
};
Generate output:
module.exports = Foo;
CommonJS Multiple Exports
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/vendor.js'),
loader: 'exports-loader',
options: {
type: 'commonjs',
exports: {
syntax: 'multiple',
name: 'Foo',
alias: 'FooA',
},
},
},
],
},
};
Generate output:
module.exports = { FooA: Foo };
Array
Allow to specify multiple exports. Each item can be a string
or an object
.
⚠ 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.
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:
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:
export default Foo;
export { Bar as BarA };
Named Exports
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve('./path/to/vendor.js'),
loader: 'exports-loader',
options: {
exports: [
{ syntax: 'named', name: 'Foo', alias: 'FooA' },
{ syntax: 'named', name: 'Bar' },
'Baz',
],
},
},
],
},
};
Generate output:
export { Foo as FooA, Bar, Baz };
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
CONTRIBUTING
License
MIT