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

然后,它工作正常.我如何使用ES6风格模块,babelify在node_modules？

Answer 1

这就是Browserify转换工作的方式,转换只会直接在被引用的模块中产生影响.

如果您希望node_modules中的模块具有转换,则需要package.json将该模块添加到该模块并添加为该模块babelify的转换.例如

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

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

有libs在node_modules文件夹然而可能是一个坏主意.通常,该文件夹中将包含真正的独立模块.我通常会说,如果文件夹无法在其他地方使用和重用,那么它不应该在node_modules中.

更新

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

{
  "presets": ["es2015"]
}

和

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

Answer 2

您可以指定源转换中package.json的 browserify.transform字段.有关源变换在package.json中如何在module-deps自述文件中工作的更多信息.

资料来源:https://github.com/substack/node-browserify#browserifytransform

示例(my_batman_project/node_modules/test_robin_module/package.json):

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

browserify将读取配置并自动执行任何给定的转换.