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

Babelify throws ParseError on import a module from node_modules

本文关键字：ParseError 模块 导入 在从 node modules Babelify      更新时间：2023-09-26

我正在与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中使用具有babelify的ES6样式模块?

这就是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
的package.json中指定源转换browserify.transform字段。有更多关于如何做的信息源转换在包中工作。在模块的deps上readme .

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

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

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

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

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

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

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

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
相关文章：