使用 webpack 输出一个 ES 模块

Question

使用 Rollup，我只需将 format 选项设置为 'es' 即可输出 ES 模块。我怎样才能对 webpack 做同样的事情？如果现在不可以，webpack 有计划添加吗？

我在documentation for output.libraryTarget 中发现的唯一提到 ES 模块的是：

libraryTarget: "commonjs-module" - 使用module.exports 对象公开它（output.library 被忽略），__esModule 被定义（它在互操作模式下作为 ES2015 模块线程化）

但是，我不太清楚。它是否与libraryTarget: "commonjs2" 相同，唯一的区别是定义了__esModule？什么是“互操作模式”？

Answer 1

首先我想说明commonJS和commonJS2之间的区别

CommonJS 不支持 module.exports = function() {} 的使用，node.js 和许多其他 commonJS 实现都使用它。

Webpack2 采用了捆绑库代码的概念，为了广泛使用它并使其兼容在不同环境中工作，我们使用 --libraryTarget 选项

现在这里的部分将回答你的两个问题

webpack2 中支持的可能库选项是

• libraryTarget: "umd", // enum
• libraryTarget: "umd-module", // ES2015 module wrapped in UMD
• libraryTarget: "commonjs-module", // ES2015 module wrapped in CommonJS
• libraryTarget: "commonjs2", // exported with module.exports
• libraryTarget: "commonjs", // exported as properties to exports
• libraryTarget: "amd", // defined with AMD defined method
• libraryTarget: "this", // property set on this
• libraryTarget: "var", // variable defined in root scope

Interlop有以下含义

为了鼓励使用CommonJS和ES6模块，当导出一个default export而没有其他exports时，将设置module.exports除了exports["default"]如下例所示

export default test;
exports["default"] = test;
module.exports = exports["default"];

所以基本上这意味着 commonJS-module 可以通过 暴露 使用 module.exports 来使用 interloping 和 ES2015 封装在 commonJS 中的模块

有关interloping 的更多信息可以在此blogpost 和stackoverflow link 中找到。

基本思想是在ES6 运行时导出和导入属性不能更改，但在commonJS 这很好因为需要更改发生在运行时 因此它具有 ES2015 与 commonJS插入。

更新

Webpack 2 提供了创建可以捆绑和包含的库的选项。

如果您希望您的模块在不同的环境中使用，那么您可以通过添加库选项将其捆绑为一个库并将其输出到您的特定环境。 docs中提到的程序。

另一个关于如何使用 commonjs-module 的简单示例

这里要注意的重要一点是babel 将exports.__esModule = true 添加到每个es6 module 并在导入时调用_interopRequire 来检查该属性。

__esModule = true 只需要在库导出上设置。需要在入口模块的exports上设置。 内部模块不需要__esModule，它只是一个 babel hack。

如文档中所述

__esModule 被定义（它被线程化为 ES2015 Module in interop 模式）

test cases中提到的用法

export * from "./a";
export default "default-value";
export var b = "b";

import d from "library";
import { a, b } from "library";

Answer 2

Webpack2 还没有相关的 libraryTarget，它不输出 ES6 包。另一方面，如果您将库捆绑在 CommonJS 捆绑器中，将无法运行 Tree Shaking，无法消除未使用的模块。这是因为 ES 模块仍在开发中，所以没有人将 ES 包发送到浏览器，而 webpack 主要用于创建支持浏览器的包。

另一方面，如果您正在发布库，您可以同时提供 CommonJS (umd) 和 ES 目标，这要感谢"module" key in package. json。实际上你不需要 webpack 来发布 ES 目标，你需要做的就是在每个文件上运行 babel 以使其达到 es2015 标准，例如，如果你使用 react 你可以只使用“react”预设运行 babel。如果您的源代码已经是 ES 2015 而没有额外的功能，您可以将模块直接指向您的 src/index.js：

//package.json
...
  "module": "src/index.js"
  "main": "dist/your/library/bundle.js
...

我发现在我的主 index.js 中使用 babel 处理 export v from 'mod' 指令很方便，所以我有 1 个模块文件导出我的所有模块。这是通过 babel-plugin-transform-export-extensions 实现的（也包含在 stage-1 预设中）。

我从 react-bootstrap 库中发现了这种方法，你可以在他们的 github 中看到脚本（它们是 webpack1）。我在react-sigma repo 中对他们的脚本进行了一些改进，请随意复制以下文件来满足您的需求：

config/babel.config.js
scripts/buildBabel.js
scripts/es/build.js
scripts/build.js // this is command line controller, if you need just ES you don't need it

同时查看 lib 目标（scripts/lib/build.js 和 .babelrc），我提供了 lib 转译模块，因此库用户可以只包含他们需要的模块，即使 ES 没有明确指定 require("react-sigma/lib/Sigma /")，如果你的库很重且模块化，特别有用！

Answer 3

如果你不介意在你的包中添加一个额外的文件，你可以使用这个解决方法作为一个解决方案，允许你将 Webpack 包分发/导入为 ES6 模块：

配置

webpack.config.js

output: {
    path: path.resolve('./dist'),
    filename: 'bundle.js',
    library: '__MODULE_DEFAULT_EXPORT__',
    libraryTarget: 'window',
    libraryExport: 'default'
  },

./dist/index.js（我们需要创建这个文件）

import './bundle.js'
const __MODULE_DEFAULT_EXPORT__ = window.__MODULE_DEFAULT_EXPORT__
delete window.__MODULE_DEFAULT_EXPORT__
export default __MODULE_DEFAULT_EXPORT__

package.json（如果你要分发你的模块很重要）

  "main": "dist/index.js",

工作原理：

• Webpack 使用 window 作为 libraryTarget 方法将包输出到 /dist/bundle.js。根据我的配置，这会使包默认导出在导入后立即以window.__MODULE_DEFAULT_EXPORT__ 的形式提供。
• 我们创建一个自定义“加载器”：./dist/index.js，它导入 /dist/bundle.js，选择 window.__MODULE_DEFAULT_EXPORT__，从 window 对象中删除它（清理），将其分配给局部变量，然后导出它作为 ES6 导出。
• 我们将package.json 配置为指向我们的“加载程序”：./dist/index.js
• 我们现在可以执行常规的import MyDefaultExportName from './dist/index.js'

注意：这个解决方案——因为它在这里公开——远非完美，并且有一些缺点和限制。虽然还有改进的空间:)

Answer 4

什么是最好的非 hacky 解决方案？

显然，this feature is coming in Webpack 5

更新：Webpack 5 已发布，但 still doesn't support this behavior.

更新 2：请参阅 this comment，这让它看起来即将推出。

更新 3：The newest version of Webpack should support this use case ?!（虽然看起来实现仍然有点错误。

如果您需要使用旧版本的 Webpack，您可以使用this 博客文章中描述的步骤来使用可以允许输出 ES 模块的插件。

在使用上面的博文时（博文的示例代码有点偏离）我们首先运行

npm i -D @purtuga/esm-webpack-plugin

然后我们可以将webpack.config.js 设置为以下内容：

const EsmWebpackPlugin = require("@purtuga/esm-webpack-plugin");
module.exports = {
    mode: "development",
    entry: "index.js",
    output: {
        filename: "consoleUtils.js",
        library: "LIB",
        libraryTarget: "var"
    },
    //...
    plugins: [
        new EsmWebpackPlugin()
    ]
}

那么我们就可以正常使用这个文件了。

import func from "./bundle.js";

func();

另请参阅this issue，它正在跟踪此功能。