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

I'm working with Babelify and Browserify. Also, I'm using ES6 style module features by node module system.

我和Babelify和Browserify一起工作。此外，我还在使用node模块系统的ES6风格模块特性。

I would like to put all my own modules into node_modules/libs.

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

For instance:

例如:

test.js in node_modules/libs

测试。在node_modules / libs js

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

main.js (will be compiled to bundle.js)

主要。js(将编译为bundl .js)

import test from 'libs/test';

test();

After that, I have compiled the above codes to bundle.js with this command:

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

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

But unfortunately, I have got some error:

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

export default () => {
^

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

Directory structure:

目录结构:

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

But, when own modules not in node_modules like this:

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

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

Then, it works fine. How can I use the ES6 style modules with babelify in node_modules?

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

3 个解决方案

#1

That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced.

这就是Browserify转换的工作方式，转换只对正在引用的模块有直接影响。

If you want a module in node_modules to have a transform, you'd need to add a package.json to that module and add babelify as a transform for that module too. e.g.

如果希望node_modules中的模块具有转换，则需要添加一个包。将json添加到该模块，并将babelify作为该模块的转换。如。

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

inside your package.json plus babelify as a dependency will tell browserify to run the babelify transform on any file inside that module.

在你的包。json + babelify作为一个依赖项将告诉browserify在模块内的任何文件上运行babelify转换。

Having libs be a folder in node_modules is however probably a bad idea. Generally that folder would have true standalone modules in it. I'd generally say that if the folder can't be taken and reused elsewhere, then it shouldn't be in node_modules.

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

Update

For Babel v6, which was recently released, you will also need to specify which transformations you would like to perform on your code. For that, I would recommend creating a .babelrc file in your root directory to configure Babel.

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

{
  "presets": ["es2015"]
}

and

和

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

#2

You can specify source transforms in the package.json in the browserify.transform field. There is more information about how source transforms work in package.json on the module-deps readme.

您可以在包中指定源转换。browserify json。变换域。关于源转换如何在包中工作有更多的信息。modudeps readme上的json。

Source: https://github.com/substack/node-browserify#browserifytransform

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

---

Example (my_batman_project/node_modules/test_robin_module/package.json):

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

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

browserify will read the configuration and perform any given transforms automatically.

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

#3

I believe this issue is actually related to ESLint.

我认为这个问题实际上与ESLint有关。

ESLint 2.0 changed what's required for it to interpret ES6 modules. http://eslint.org/docs/user-guide/migrating-to-2.0.0

ESLint 2.0改变了解释ES6模块所需的内容。http://eslint.org/docs/user-guide/migrating-to-2.0.0

You'll need to modify your ecmaFeatures configuration option and replace it with something like:

您将需要修改您的ec蚂蝗配置选项，并将其替换为以下内容:

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