使用 webpack 输出一个 ES 模块 [英] Output an ES module using webpack

问题描述

使用 Rollup，我可以通过简单地将 format 选项设置为 'es' 来输出 ES 模块.我如何用 webpack 做同样的事情?如果现在不可能，webpack 有没有计划添加它?

With Rollup I can output an ES module by simply setting the format option to 'es'. How can I do the same with webpack? If it's not possible now, does webpack have any plans to add it?

我在 output.libraryTarget 文档中找到的唯一内容<提到 ES 模块的/a> 是这样的:

The only thing I've found in the documentation for output.libraryTarget that mentions ES modules is this:

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

libraryTarget: "commonjs-module" - Expose it using the module.exports object (output.library is ignored), __esModule is defined (it's threaded as ES2015 Module in interop mode)

不过，我还不太清楚.它是否与 libraryTarget: "commonjs2" 相同，唯一的区别是定义了 __esModule?什么是互操作模式"?

However, it's rather unclear to me. Is it the same as libraryTarget: "commonjs2" with the only difference that __esModule is defined? What is "interop mode"?

推荐答案

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

Webpack2 does not have relevant libraryTarget yet, it does not output ES6 bundles. From the other side If you bundle your library in CommonJS bundlers wont be able to run Tree Shaking, not being able to eliminate unused modules. That's due to ES modules are still developing, so nobody ships ES bundles to browser, while webpack used primarily to create browser enabled bundles.

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

From the other side if you are publishing library you can provide both CommonJS (umd) and ES targets, thanks to "module" key in package. json. Actually you do not need webpack to publish ES target, all you need to do is to run babel on every file to get it to es2015 standart, for example if you are using react you can run babel with just "react" preset. If your source is already ES 2015 without extra features you can point module straight to your 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 预设中)实现的.

I found it convenient to use babel to handle export v from 'mod' instructions in my main index.js, so I have 1 module file exporting all my modules. That's achieved with babel-plugin-transform-export-extensions (also included in stage-1 preset).

我从 react-bootstrap 库中发现了这种方法，你可以在他们的 github 中看到脚本(它们是 webpack1).我在我的 react-sigma repo 中稍微改进了他们的脚本，请随意复制以下文件会做你需要的:

I spot this approach from react-bootstrap library, you can see scripts in their github (they are webpack1). I have improved their scripts a little in my react-sigma repo, feel free to copy following files which will do what you need:

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/")，如果您的库很重且模块化，则特别有用！

Also look at lib target (scripts/lib/build.js and .babelrc), I provide lib transpiled modules so library users can include only modules they need even without ES explicitly specifying require("react-sigma/lib/Sigma/"), especially useful if your lib is heavy and modular!

这篇关于使用 webpack 输出一个 ES 模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！