Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Exports Loader

License

NotificationsYou must be signed in to change notification settings

webpack-contrib/exports-loader

Repository files navigation

npmnodetestscoveragediscussionsize

exports-loader

Allows you to set up exports usingmodule.exports orexport for source files.

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

For more information on compatibility issues, refer to theShimming guide in the official documentation.

Warning

By default, the loader generates exports using ES module syntax.

Warning

Be careful: modifying existing exports (export,module.exports, orexports) or adding new exports can lead to errors.

Getting Started

To begin, you'll need to installexports-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 thesyntax,name andalias of export.

The documentation and syntax examples can be readhere.

Warning

%20 represents a space in a query string because spaces are not allowed 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");

Descriptions 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",},},],},};

Finally, runwebpack using the method you normally use (e.g., via CLI or an npm script).

Options

NameTypeDefaultDescription
type{String}moduleFormat of generated exports
exports{String|Object|Array<String|Object>}undefinedList of exports

type

Type:StringDefault:module

Format of generated exports.

Possible values -commonjs (CommonJS module syntax) andmodule (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|ArrayDefault:undefined

List of exports.

String

Allows to use a string to describe an export.

Syntax

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) -

    • iftype ismodule- can bedefault andnamed,
    • iftype iscommonjs- can besingle andmultiple

  • [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 settype: "commonjs" to usesingle ormultiple syntaxes.

Warning

Aliases can't be used together withdefault 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// ...exportdefaultFoo;
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{FooasFooA};
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// ...exportdefaultFoo;
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{FooasFooA};
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 astring or anobject.

Warning

Not possible to use bothsingle 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.

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// ...exportdefaultFoo;export{BarasBarA};
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{FooasFooA,Bar,Baz};

Contributing

We welcome all contributions!

If you're new here, please take a moment to review our contributing guidelines.

CONTRIBUTING

License

MIT

About

Exports Loader

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

    Packages

    No packages published

    Contributors24

    [8]ページ先頭
    ©2009-2025 Movatter.jp