exports-loader

允许为源文件设置导出 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。可在此处阅读文档和语法示例 here。

警告

%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。

选项

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（空格）允许分隔导出项的 语法、名称 和 别名。

字符串语法 - [[语法] [名称] [别名]] 或 [[语法]|[名称]|[别名]]，其中

• [语法]（可以省略） -

  • 如果 类型 为 模块，可以是 默认 和 命名，
  • 如果 类型 为 commonjs，可以是 单一 和 多重

• [名称] - 导出值名称（必需）

• [别名] - 导出值的别名（可以省略）

示例

• [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 [名称] [名称]别名] - 生成 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 };

对象

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

属性

• 语法 - 对于 module 类型（ES 模块 模块格式），可以是 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 };

贡献

如果您尚未这样做，请花点时间阅读我们的贡献指南。

贡献

许可证

MIT