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

Question

我正在使用 Babelify 和 Browserify。此外，我正在通过节点模块系统使用ES6样式的模块功能。

我想把所有自己的模块放到 node_modules/libs 中。

例如：

在 node_modules/libs 中的 test.js。

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中使用ES6样式的模块，并用babelify进行转换？

- Preco Plusb

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

- loganfsmyth

---

谢谢您的回答。然而，libs文件夹只是存储我的个人库（如内部模块）。但这仍然是不好的方法吗？ - Preco Plusb

我在我的包中确实有babelify，但我仍然遇到了相同的错误。 - Dzung Nguyen

@nXqd 你也可以使用Bower将私有Git存储库导入为模块。 - mate64

@nXqd，请查看我的新回答。 - mate64

对我来说这还不够，我添加了预设 "browserify": { "transform": [["babelify", { "presets": ["es2015"] } ]] } ，这就解决了问题。 - vincentp

Answer 2

你可以在package.json的browserify.transform字段中指定源转换。有关源转换如何在package.json中工作的更多信息，请参见module-deps readme。

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

---

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

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

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

- mate64

---

为了补充这个答案，我发现需要额外的步骤才能使它与Babel 6.0一起使用。从6.0版本开始，Babel是一个通用平台，不再默认转译ES2015代码。跟随babel-preset-2015的做法，我创建了一个.babelrc文件来加载es2015预设，解决了ParseError问题。 - Jan Miksovsky

创建 .babelrc 文件，并使用以下配置来修复解析 JSX 代码时发生的 ParseError：{ "presets": [ "es2015", "stage-1", "react" ] } - Vineet Kapoor

Answer 3

我相信这个问题实际上与ESLint有关。

ESLint 2.0 改变了解释ES6模块所需的内容。 http://eslint.org/docs/user-guide/migrating-to-2.0.0 您需要修改您的ecmaFeatures配置选项，并替换为以下内容：

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },

- Sean Anderson