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

Question

我正在Babelify和Browserify一起工作。另外，我正在按节点模块系统使用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

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

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