npm.devtool.tech
👏 You can access exports-loader package with using exportsLoader variable in browser devtools!
exports loader module for webpack

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

npm node deps tests coverage chat size

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"; // 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

NameTypeDefaultDescription
type{String}moduleFormat of generated exports
exports{String|Object|Array<String|Object>}undefinedList 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 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 };.
  • [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:

// ... // 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 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:

// ... // 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.

⚠ 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:

// ... // 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.

CONTRIBUTING

License

MIT

🔎Explore Package🔎CDN Script

Score

Popularity29/100
Quality99/100
Maintenance100/100

Dependencies