使用webpack输出ES模块

Question

使用汇总，我可以通过简单地将format选项设置为'es'来输出ES模块。我怎么才能和webpack做同样的事呢？如果现在不可能的话，webpack有什么计划吗？

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

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

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

Answer 1

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

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

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

我发现使用babel在我的主export v from 'mod'中处理index.js指令很方便，所以我有一个模块文件导出我的所有模块。这是与babel插件-转换-导出-扩展(也包括在第1阶段预设)。

我从react引导库中发现了这种方法，您可以在它们的github中看到脚本(它们是webpack1)。我在我的反应-西格玛回购中对它们的脚本做了一些改进，可以随意地复制以下文件，这些文件可以满足您的需要：

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目标(script/ lib /build.js和.babelrc)，我提供了库转置模块，这样库用户就可以只包含他们需要的模块，即使没有ES显式地指定需求(“react Sigma/ lib /Sigma/”)，尤其是如果您的库是沉重的模块化的话！

Answer 2

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

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

Webpack2使用了捆绑库代码的概念，为了广泛使用它，为了使它在不同的环境中兼容，我们使用--https://webpack.js.org/guides/author-libraries/#add-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模块，在导出没有其他exports module.exports的default export时，除了exports["default"]之外，将设置如下示例所示

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

因此，从根本上说，这意味着可以通过使用包装在commonJS-module中的interloping和ES2015模块，将其公开为ES2015来使用。

有关interloping的更多信息可以在这个博客和它的堆栈溢出链接中找到。

基本思想是在ES6运行时导出和导入属性不能更改，但是在commonJS 中，这可以很好地工作，因为需求更改发生在运行时，因此它具有ES2015 is Interlpled和commonJSE 263。

更新

Webpack 2提供了创建库的选项，该库可以打包和包含。

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

关于如何使用公共to模块的另一个简单示例

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

__esModule = true只需要在库导出上设置。它需要在条目模块的exports上设置。内部模块不需要__esModule，它只是一个babel黑客。

就像文档中提到的

__esModule被定义为(在互操作模式下，它被线程化为ES2015模块)

测试用例中提到的用法

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

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

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将包输出到/dist/bundle.js，使用window作为libraryTarget方法。根据我的配置，这使得包默认导出在导入后立即可用为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'

注意:这个解决方案是公开在这里的-是远远不是完美的，并有一些缺点和局限性。虽然仍有改进的空间:)