exports-loader

免责声明 exports-loader是一个由社区成员维护的第三方包，它可能不具备与 webpack 相同的支持、安全策略或许可证，并且不受 webpack 维护。

允许你使用 module.exports 或 export 为源文件设置导出。

当源文件不包含导出或某些内容未导出时很有用。

有关兼容性问题的更多信息，请参阅官方文档中的垫片 (Shimming) 指南。

[!警告]

默认情况下，加载器使用 ES 模块语法生成导出。

[!警告]

请注意：修改现有导出（export、module.exports 或 exports）或添加新导出可能会导致错误。

入门

首先，你需要安装 exports-loader

npm install exports-loader --save-dev

或

yarn add -D exports-loader

或

pnpm add -D exports-loader

内联

| 或 %20（空格）允许分隔导出的 syntax、name 和 alias。

文档和语法示例可以在此处阅读。

[!警告]

%20 在查询字符串中表示一个空格，因为 URL 中不允许有空格。

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

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

字符串值的描述可以在下面的文档中找到。

使用配置

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

最后，使用你通常使用的方法运行 webpack（例如，通过 CLI 或 npm 脚本）。

选项

名称	类型	默认值	描述
`类型`	`{String}`	`模块`	生成导出的格式
`导出`	`{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`

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

`语法`

| 或 %20（空格）允许分隔导出的 syntax、name 和 alias。

字符串语法 - [[syntax] [name] [alias]] 或 [[syntax]|[name]|[alias]]，其中

[syntax] (可省略) -
- 如果 type 是 module - 可以是 default 和 named，
- 如果 type 是 commonjs - 可以是 single 和 multiple
[name] - 导出值的名称 (必需)
[alias] - 导出值的别名 (可省略)

示例

[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] - 生成 ES 模块命名导出，并将一个与文件名相同的值以另一个名称导出。例如，对于 single.js，它将是 single 和 singleAlias，生成 export { single as singleAlias };。

[!警告]

你需要设置 type: "commonjs" 来使用 single 或 multiple 语法。

[!警告]

别名不能与 default 或 single 语法一起使用。

示例

ES 模块默认导出

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 模块命名导出

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 单一导出

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 - 导出值的名称 (必需)
alias - 导出值的别名 (可省略)

示例

ES 模块默认导出

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 模块命名导出

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 模块格式的限制，不能使用多个 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 };

贡献

我们欢迎所有贡献！

如果你是新用户，请花一些时间阅读我们的贡献指南。

贡献

许可证

« 上一页