我正在与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"
},