Webpack exports-loader

2023-05-22 09:43 更新

允许对源文件设置 ​module.exports​/​export​。

当源文件不包含 exports 或者有一些内容没有 export 时是有用的。

想要获取有关兼容性的进一步提示,请查看官方文档中的 Shimming

⚠ 默认情况下,loader 生成具名的 ES module。⚠ 请注意,原始代码中现有的 exports(export/module.exports/exports)和导出新值可能会导致失败。

快速开始

首先,你需要安装 exports-loader:

$ npm install exports-loader --save-dev

内联

可以使用 | 或者 %20(空格)分隔 export 中的 syntax,name 和 alias。

⚠ %20 是查询字符串中的空格,因为你不能在 URL 中使用空格

然后将 loader 添加到所需的 import 语句或 require 调用中。例如:

import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// export { myFunction }

myFunction('Hello world');
import {
  myVariable,
  myFunction,
} from 'exports-loader?exports=myVariable,myFunction!./file.js';
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// export { myVariable, myFunction };

const newVariable = myVariable + '!!!';

console.log(newVariable);

myFunction('Hello world');
const {
  myFunction,
} = require('exports-loader?type=commonjs&exports=myFunction!./file.js');
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// module.exports = { myFunction }

myFunction('Hello world');
// 替换语法:
// import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
import myFunction from 'exports-loader?exports=default|myFunction!./file.js';
// `%20` 是查询字符串中的空格,等同于 `default myFunction`
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// exports default myFunction;

myFunction('Hello world');
const myFunction = require('exports-loader?type=commonjs&exports=single|myFunction!./file.js');
// `|` 是查询字符串中的分隔符, 等同于 `single|myFunction`
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// module.exports = myFunction;

myFunction('Hello world');
import { myFunctionAlias } from 'exports-loader?exports=named|myFunction|myFunctionAlias!./file.js';
// `|` 是查询字符串中的分隔符, 等同于 `named|myFunction|myFunctionAlias`
// 向源文件中添加如下代码:
//
// ...
// Code
// ...
//
// exports { myFunction as myFunctionAlias };

myFunctionAlias('Hello world');

可以在下面的文档中找到字段值的含义。

使用配置文件

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 你可以使用 `regexp`
        // test: /vendor\.js/$
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'myFunction',
        },
      },
    ],
  },
};

然后用你喜欢的方式运行 webpack。

配置项

Name Type Default Description
type {String} module 生成导出的格式
exports {String|Object|Array<String|Object>} undefined 导出的列表

type

类型:​String​ 默认值:module

生成导出的格式

可选值 - commonjs(CommonJS 模块语法)和 module(ES 模块语法)。

commonjs

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'Foo',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// 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',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// Code
// ...

export { Foo };

exports

类型:​String|Array​ 默认值:undefined

导出的列表。

String

允许使用一个字符串来描述导出。

Syntax

可以使用 | 或者 %20(空格)分隔 export 中的 syntax,name 和 alias。

字符串语法 - [[syntax] [name] [alias]] 或者 [[syntax]|[name]|[alias]],含义如下:

  • [syntax]​ (可以省略) -如果 type 为 module- 可以是 default 和 named,如果 type 为 commonjs- 可以使 single 和 multiple
  • [name]​ - 导出值的名称 (必填项)
  • [alias]​ - 导出值的别名 (可以省略)

Examples:

  • [Foo]​ - 生成 export { Foo };.
  • [default Foo]​ - 生成 export default Foo;.
  • [named Foo]​ - 生成 export { Foo };.
  • [named Foo FooA]​ - 生成 export { Foo as FooA };.
  • [single Foo]​ - 生成 module.exports = Foo;.
  • [multiple Foo]​ - 生成 module.exports = { Foo };.
  • [multiple Foo FooA]​ - 生成 module.exports = { 'FooA': Foo };.
  • [named [name] [name]Alias]​ - 生成名为 exports 的 ES 模块,并导出等于另一个名称下的文件名的值., 对于 single.js 将会是 single and 和singleAlias, 生成 export { single as singleAlias };.
⚠ 你需要设置 type: "commonjs" 才能使用 single 或者 multiple 语法。
⚠ 别名不能与 default 或者 single 语法一起使用。
示例
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',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// 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',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// 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',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// Code
// ...

module.exports = Foo;
CommonJS 导出多个

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'multiple Foo FooA',
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// Code
// ...

module.exports = { FooA: Foo };

Object

允许使用对象来描述导出。

属性:

  • syntax​ - 对于 module 类型(ES modules 模块格式)可以是 default 或者 named,对于 commonjs 类型(CommonJS 模块格式)可以是 single 或者 multiple(可以省略)
  • name​ - 导出值的名称 (required)
  • alias​ - 导出值的别名 (may be omitted)
示例
ES Module 默认导出

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: {
            syntax: 'default',
            name: 'Foo',
          },
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// Code
// ...

export default Foo;
ES Module 重命名导出

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

生成的输出结果:

// ...
// Code
// ...

export { Foo as FooA };
CommonJS 单个导出

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

生成的输出结果:

// ...
// Code
// ...

module.exports = Foo;
CommonJS 导出多个

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

生成的输出结果:

// ...
// Code
// ...

module.exports = { FooA: Foo };

Array

允许指定多个导出。 每一个可以是 ​string​ 或者 ​object​.

⚠ 因为 CommonJS 格式限制,不能将 single 与 multiple 语法一起使用。
⚠ 因为 ES module 格式限制,不能导出多个 default 值。
⚠ 因为 CommonJS 格式限制,不能导出多个 single 值。
示例
CommonJS 导出多个

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

生成的输出结果:

// ...
// Code
// ...

module.exports = { Foo, Bar, BazA: Bar };
ES 默认导出与导出重命名

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: ['default Foo', 'named Bar BarA'],
        },
      },
    ],
  },
};

生成的输出结果:

// ...
// Code
// ...

export default Foo;
export { Bar as BarA };
导出重命名

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

生成的输出结果:

// ...
// Code
// ...

export { Foo as FooA, Bar, Baz };

贡献

如果您还没有阅读,请花一点时间阅读我们的贡献指南。

License

MIT


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号