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.
Warning
By default loader generate ES module named syntax.
Warning
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
or
yarn add -D exports-loader
or
pnpm add -D exports-loader
Inline
The |
or %20
(space) allow to separate the syntax
, name
and alias
of export.
The documentation and syntax examples can be read here.
Warning
%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";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myFunction }
myFunction("Hello world");
import {
myVariable,
myFunction,
} from "exports-loader?exports=myVariable,myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myVariable, myFunction };
const newVariable = myVariable + "!!!";
console.log(newVariable);
myFunction("Hello world");
const {
myFunction,
} = require("exports-loader?type=commonjs&exports=myFunction!./file.js");
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = { myFunction }
myFunction("Hello world");
// Alternative syntax:
// import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
import myFunction from "exports-loader?exports=default|myFunction!./file.js";
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// exports default myFunction;
myFunction("Hello world");
const myFunction = require("exports-loader?type=commonjs&exports=single|myFunction!./file.js");
// `|` is separator in a query string, equivalently `single|myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = myFunction;
myFunction("Hello world");
import { myFunctionAlias } from "exports-loader?exports=named|myFunction|myFunctionAlias!./file.js";
// `|` is separator in a query string, equivalently `named|myFunction|myFunctionAlias`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// 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 |
---|---|---|---|
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:
// ...
// 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
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
ismodule
- can bedefault
andnamed
, - if
type
iscommonjs
- can besingle
andmultiple
- if
-
[name]
- name of an exported value (required) -
[alias]
- alias of an exported value (may be omitted)
Examples:
[Foo]
- generatesexport { Foo };
.[default Foo]
- generatesexport default Foo;
.[named Foo]
- generatesexport { Foo };
.[named Foo FooA]
- generatesexport { Foo as FooA };
.[single Foo]
- generatesmodule.exports = Foo;
.[multiple Foo]
- generatesmodule.exports = { Foo };
.[multiple Foo FooA]
- generatesmodule.exports = { 'FooA': Foo };
.[named [name] [name]Alias]
- generates ES module named exports and exports a value equal to the filename under other name., forsingle.js
it will besingle
andsingleAlias
, generatesexport { single as singleAlias };
.
Warning
You need to set
type: "commonjs"
to usesingle
ormultiple
syntaxes.
Warning
Aliases can't be used together with
default
orsingle
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:
// ...
// 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: {
type: "commonjs",
exports: "multiple Foo FooA",
},
},
],
},
};
Generate output:
// ...
// Code
// ...
module.exports = { FooA: Foo };
Object
Allows to use an object to describe an export.
Properties:
syntax
- can bedefault
ornamed
for themodule
type (ES modules
module format), andsingle
ormultiple
for thecommonjs
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:
// ...
// 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: {
syntax: "named",
name: "Foo",
alias: "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: {
syntax: "single",
name: "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: {
type: "commonjs",
exports: {
syntax: "multiple",
name: "Foo",
alias: "FooA",
},
},
},
],
},
};
Generate output:
// ...
// Code
// ...
module.exports = { FooA: Foo };
Array
Allow to specify multiple exports. Each item can be a string
or an object
.
Warning
Not possible to use
single
andmultiple
syntaxes together due to CommonJS format limitations.
Warning
Not possible to use multiple
default
values due to ES module format limitations.
Warning
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:
// ...
// 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 };
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:
// ...
// Code
// ...
export { Foo as FooA, Bar, Baz };
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.