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

问题描述

使用Rollup我可以通过简单地将格式选项设置为'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 是：

libraryTarget：commonjs-module - 使用 module.exports <公开它/ code>对象（ 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包。从另一方面如果您在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标准，例如，如果你使用的是反应，你可以用反应预设运行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
...

我发现使用babel从'mod'处理 export v很方便/ code>我的主index.js中的说明，所以我有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 /），如果你的lib特别有用沉重而模块化！

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屋！