javascript - Babelify 在从 node_modules 导入模块时抛出 ParseError

Question

我正在使用 Babelify 和 Browserify .另外，我正在使用 Node 模块系统的 ES6 样式模块功能。

我想将我自己的所有模块放入 node_modules/libs。

例如:

test.js 在 node_modules/libs

export default () => {
  console.log('Hello');
};

main.js(会编译成bundle.js)

import test from 'libs/test';

test();

之后，我用这个命令将上面的代码编译成bundle.js:

browserify -t babelify main.js -o bundle.js

但不幸的是，我遇到了一些错误:

export default () => {
^

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

目录结构:

[test]
  `-- node_modules
  │ `-- libs
  │  `-- test.js
  `-- main.js

但是，当自己的模块不在 node_modules 中时:

[test]
  `-- libs
  │ `-- test.js
  `-- main.js

然后，它工作正常。如何在 node_modules 中使用带有 babelify 的 ES6 样式模块？

Answer 1

这就是 Browserify 转换的工作方式，转换仅在被引用的模块中直接起作用。

如果您希望 node_modules 中的模块具有转换，则需要向该模块添加 package.json 并添加 babelify 作为其转换模块也是。例如

"browserify": {
  "transform": [
    "babelify"
  ]
},

在你的 package.json 加上 babelify 作为依赖项将告诉 browserify 运行 babelify 转换该模块内的任何文件。

让 libs 成为 node_modules 中的一个文件夹可能是个坏主意。通常，该文件夹中将包含真正的独立模块。我通常会说，如果该文件夹不能在其他地方使用和重用，那么它不应该在 node_modules 中。

更新

对于最近发布的 Babel v6，您还需要指定要对代码执行哪些转换。为此，我建议在你的根目录中创建一个 .babelrc 文件来配置 Babel。

{
  "presets": ["es2015"]
}

和

npm install --save-dev babel-preset-es2015