如何通过 Webpack 和 6to5 使用带有 es6 模块的 npm 包？答案

【问题标题】：How to consume npm package with es6 module via Webpack and 6to5?如何通过 Webpack 和 6to5 使用带有 es6 模块的 npm 包？
【发布时间】：2015-02-03 00:52:53
【问题描述】：

假设我想在我的项目（或任何给定的 npm 包）中使用 Immutable。我有 npm installed 它，所以它在 node_modules 中。当然，那里有 CommonJS 导出。但是，我想在我的项目中使用 es6 模块。

我正在使用 Webpack 一起编译，用 6to5-loader 处理 es6 模块语法。

在我的源文件中，我说 import Immutable from 'immutable'; --- 但这会导致问题，因为 es6 import 正在寻找已导出的 es6 default，但事实并非如此（对于 Immutable 或可能几乎所有其他 npm 包）。编译后的代码最终看起来像这样：var Immutable = require('immutable')["default"]; --- 这当然会引发错误，因为没有 default 属性可供查找。

我可以使用带有 es6 模块的 npm 包吗？

【问题讨论】：

标签： commonjs webpack javascript ecmascript-6

【解决方案1】：

Babel.js 贡献者在这里。您正在寻找以下内容：

import * as Immutable from 'immutable';
// compiles to:
var Immutable = require('immutable');

Interactive demo

注意：这与 common 或 commonInterop 模块选项一起使用。其他请见：https://babeljs.io/docs/usage/modules/

【讨论】：

那么你会推荐使用commonInterop 和我描述的import Immutable 语法的import * as Immutable 语法吗？ import * as Immutable 语法在最终的“真实事物”中会起作用吗？
commonInterop 可能会变成default。我仍然建议以这种方式编写它，因为在使用 es6 编写依赖项之前，将其编写为 import * as 更正确（规范）。

【解决方案2】：

刚刚想通了。（解决方案是特定于工具的 --- 但 es6 模块现在只存在于它们启用工具的情况下，所以我认为这已经足够“答案”了。）

6to5 的默认模块转译使用common 选项，这导致了我在上面抱怨的问题。但是还有另一种选择：commonInterop --- 它必须是为了处理我正在处理的情况而构建的。见https://6to5.github.io/modules.html#common-interop

为 6to5 欢呼三声。

【讨论】：