如何通过Webpack和6to5使用ES6模块消耗npm包？

Question

假设我想在我的项目中使用Immutable（或任何其他npm包）。我已经通过npm安装了它，因此它在node_modules中。当然，在那里它有CommonJS导出。但是，我想在我的项目中使用es6模块。

我正在使用Webpack将所有内容编译在一起，并使用6to5-loader处理es6模块语法。

在我的源文件中，我说import Immutable from 'immutable'; --- 但这会引起问题，因为es6 import正在寻找已导出的es6 default，而这并不是Immutable（或可能几乎任何其他npm包）的情况。编译后的代码最终看起来像这样：var Immutable = require('immutable')["default"]; --- 这当然会抛出错误，因为不存在要查找的默认属性。

我能用es6模块消耗npm包吗？

- davidtheclark

Answer 1

我是Babel.js的贡献者。你想要找这个：

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

交互式演示

注意：这是使用 common 或 commonInterop 模块选项之一。对于其他选项，请参见：https://babeljs.io/docs/usage/modules/

- James Kyle

---

那么，您会推荐使用import * as Immutable语法，而不是使用我描述的commonInterop和import Immutable语法吗？import * as Immutable语法是最终“真正的东西”中将起作用的语法吗？ - davidtheclark

commonInterop 很可能会成为默认选项。我仍然建议这样编写，因为在你的依赖项以es6编写之前，按照规范写成import * as是更正确的方式。 - James Kyle

Answer 2

刚才想出了解决方法。（该解决方案是特定于工具的 --- 但是 es6 模块现在只存在于它们被工具启用的范围内，所以我认为这已经足够成为一个“答案”了。）

6to5 的默认模块转换使用 common 选项，导致了我上面抱怨的问题。但是还有另一种选项：commonInterop --- 这肯定是为应对我正在处理的情况而建立的。请参见 https://6to5.github.io/modules.html#common-interop 因此，三声欢呼为 6to5。

- davidtheclark