- Notifications
You must be signed in to change notification settings - Fork37
webpack-contrib/exports-loader
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Allow to setup exportsmodule.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 outShimming 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.
To begin, you'll need to installexports-loader:
npm install exports-loader --save-devor
yarn add -D exports-loaderor
pnpm add -D exports-loaderThe| or%20 (space) allow to separate thesyntax,name andalias of export.The documentation and syntax examples can be readhere.
Warning
%20 is space in a query string, because you can't use spaces in URLs
Then add the loader to the desiredimport statement orrequire 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 };constnewVariable=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';importmyFunctionfrom"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");
constmyFunction=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.
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 runwebpack via your preferred method.
| Name | Type | Default | Description |
|---|---|---|---|
type | {String} | module | Format of generated exports |
exports | {String|Object|Array<String|Object>} | undefined | List of exports |
Type:StringDefault:module
Format of generated exports.
Possible values -commonjs (CommonJS module syntax) andmodule (ES module syntax).
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};
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};
Type:String|ArrayDefault:undefined
List of exports.
Allows to use a string to describe an export.
The| or%20 (space) allow to separate thesyntax,name andalias of export.
String syntax -[[syntax] [name] [alias]] or[[syntax]|[name]|[alias]], where:
[syntax](may be omitted) -- if
typeismodule- can bedefaultandnamed, - if
typeiscommonjs- can besingleandmultiple
- 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.jsit will besingleandsingleAlias, generatesexport { single as singleAlias };.
Warning
You need to settype: "commonjs" to usesingle ormultiple syntaxes.
Warning
Aliases can't be used together withdefault orsingle syntaxes.
webpack.config.js
module.exports={module:{rules:[{test:require.resolve("./path/to/vendor.js"),loader:"exports-loader",options:{exports:"default Foo",},},],},};
Generate output:
// ...// Code// ...exportdefaultFoo;
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{FooasFooA};
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;
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};
Allows to use an object to describe an export.
Properties:
syntax- can bedefaultornamedfor themoduletype (ES modulesmodule format), andsingleormultiplefor thecommonjstype (CommonJSmodule format) (may be omitted)name- name of an exported value (required)alias- alias of an exported value (may be omitted)
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// ...exportdefaultFoo;
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{FooasFooA};
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;
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};
Allow to specify multiple exports. Each item can be astring or anobject.
Warning
Not possible to usesingle andmultiple syntaxes together due to CommonJS format limitations.
Warning
Not possible to use multipledefault values due to ES module format limitations.
Warning
Not possible to use multiplesingle values due to CommonJS format limitations.
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};
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// ...exportdefaultFoo;export{BarasBarA};
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{FooasFooA,Bar,Baz};
Please take a moment to read our contributing guidelines if you haven't yet done so.
