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

Babelify throws ParseError on import a module from node_modules

提问by Plusb Preco

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

我正在使用Babelify和Browserify。另外，我通过节点模块系统使用 ES6 风格的模块功能。

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

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

For instance:

例如：

test.jsin node_modules/libs

test.js在 node_modules/libs

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

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

main.js（将被编译为bundle.js）

import test from 'libs/test';

test();

After that, I have compiled the above codes to bundle.jswith 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_moduleslike this:

但是，当自己的模块不是node_modules这样时：

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

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

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

回答by loganfsmyth

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.jsonto that module and add babelifyas a transform for that module too. e.g.

如果您希望 node_modules 中的模块进行转换，则需要package.json向该模块添加一个并babelify作为该模块的转换添加。例如

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

inside your package.jsonplus babelifyas a dependency will tell browserifyto run the babelifytransform on any file inside that module.

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

Having libsbe 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.

有libs在node_modules文件夹然而可能是一个坏主意。通常，该文件夹中将包含真正的独立模块。我通常会说，如果文件夹不能在其他地方被使用和重用，那么它不应该在 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 .babelrcfile in your root directory to configure Babel.

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

{
  "presets": ["es2015"]
}

and

和

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

回答by mate64

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

您可以指定源转换中package.json的 browserify.transform字段。在module-deps readme 中有关于 package.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"
  ]
},

browserifywill read the configuration and perform any given transforms automatically.

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

回答by Sean Anderson

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 ecmaFeaturesconfiguration option and replace it with something like:

您需要修改ecmaFeatures配置选项并将其替换为以下内容：

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