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

Question

假设我想在我的项目（或任何给定的npm包）中使用Immutable。 我有npm install它，所以它在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包吗？

Answer 1

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

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

互动演示

注意：这与common或commonInterop模块选项有关。 对于其他人，请参阅： https ： //babeljs.io/docs/usage/modules/

Answer 2

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

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

所以三个欢呼为6to5。