从node_modules

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

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

Answer 1

这就是Browserify转换工作的方式，转换只会直接影响被引用的模块。

如果您希望node_modules中的模块具有转换，您需要向该模块添加package.json并添加babelify作为该模块的转换。 e.g。

"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

Answer 2

  

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

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

示例（my_batman_project/node_modules/test_robin_module/package.json）：

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

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

Answer 3

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

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

您需要修改ecmaFeatures配置选项，并将其替换为：

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