Package Exports

exports-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (exports-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

⚠ Be careful, existing exports (export/module.exports/exports) can break the source code or be overwritten.

⚠ By default loader generate ES module named syntax.

Getting Started

To begin, you'll need to install exports-loader:

$ npm install exports-loader --save-dev

Inline

Then add the loader to the desired require calls. For example:

import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
// Adds the following code to the file's source:
//
// export { myFunction }

myFunction('Hello world');

import {
  myVariable,
  myFunction,
} from 'exports-loader?exports[]=myVariable&exports[]=myFunction!./file.js';
// Adds the following code to the file's source:
//
// export { myVariable, myFunction };

const newVariable = myVariable + '!!!';

console.log(newVariable);

myFunction('Hello world');

import { file } from 'exports-loader?[name]!./file.js';
// Adds the following code to the file's source:
//
// export { file };

file('string');

const {
  myFunction,
} = require('exports-loader?type=commonjs&exports=myFunction!./file.js');
// Adds the following code to the file's source:
//
// module.exports = { myFunction }

myFunction('Hello world');

import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// exports default myFunction;

myFunction('Hello world');

const myFunction = require('exports-loader?type=commonjs&exports=single%20myFunction!./file.js');
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// module.exports = myFunction;

myFunction('Hello world');

import { myFunctionAlias } from 'exports-loader?exports=named%20myFunction%20myFunctionAlias!./file.js';
// `%20` is space in a query string, equivalently `named myFunction myFunctionAlias`
// Adds the following code to the file's source:
//
// 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`

String values let you specify export syntax, name, and alias.

String syntax - [[syntax] [name] [alias]], where:

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

[Foo] - generates ES module named exports and exports Foo value.
[default Foo] - generates ES module default export and exports Foo value.
[named Foo FooA] - generates ES module named exports and exports Foo value under FooA name.
[single Foo] - generates CommonJS single export and exports Foo value.
[multiple Foo FooA] - generates CommonJS multiple exports and exports Foo value under FooA name.
[[name]] - generates ES module named exports and exports a variable equal to the filename, for single.js it will be 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

⚠ You need to set type: "commonjs" to use single or multiple syntax.

⚠ Aliases can't be used together with default or single syntax.

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