转载请注明出处 https://brickcarvingartist.github.io/Setting-up-ES6/4.%E9%85%8D%E7%BD%AEBabel6
Babel6较Babel5更具可配置性,但也更难配置。这章提供些小技巧。
紧接着的是少量重要的npm包。所有的Babel包都属于Github上的一个仓库。浏览它们的源码和它们的package.json
是有指导性的。
babel-core
:Babel的核心组织和插件基建。你很少需要安装这个包,因为例如babel-cli
这样的包把它作为了依赖,意味着它会在它们被安装时自动安装上。babel-cli
:Babel的命令行接口。它包含下面的指令:babel-doctor
侦测你的Babel安装上的常规问题。babel-external-helpers
在控制台上显印Babel的所有帮手方法(比如子类的继承)。babel-register
:让你激活Node.js中的Babel代码翻译功能。当你这么做了后,你需求的所有模块(除去你想要忽略的代码,比如通过npm安装的包)会自动被代码翻译。
Babel常用作编译输入文件,比如下面两种情节:
- 通过命令行工具
babel
编译一个文件:
babel input-es6.js --out-file output-es5.js
- 运行一个以ES6输血的Node.js脚本:
babel-node input-es6.js
配置信息是一个集合了很多源文件(它们稍后会被介绍)的JSON数据的对象。两个配置选项会由提供为如何的输出而受很大影响:插件和前置项。这些会稍后阐述。剩下的配置选项都在Babel文档中被阐述。
大致来说,插件是在编译时被应用为输入的方法。插件的两个重要的类型是:
-
语法插件使Babel在内置基础语法上句法分析语法实体。它在架构一颗抽象语法树上有帮助。例子是:
-
转换插件编辑抽象语法树。例子是:
如果你想要编译一些不是基础语法中的部分,你同时需要一个语法插件和一个相对应的转换插件。不管怎样,每个依赖于语法插件的转换插件自动激活那个插件。
插件被通过npm安装。它们的包的名字都加上了前缀babel-plugin-
:
syntax-jsx
插件:npm install babel-plugin-syntax-jsx
transform-react-jsx
插件:npm install babel-plugin-transform-react-jsx
为了配置你想要的Babel输出,你需要指定它需要用什么样的插件。你可以指定:
- 个性化插件
- 前置项,一个支持众多编译情景的插件集合。
下面都是有用的前置项:
- es2015:编译ES6(如ECMAScript规范中所描述的)至ES5
- stage-0:编译阶段3的ECMAScript提议至ES5
- react:编译JSX至JavaScript并移除Flow的类型注释
- es2015-node5:仅包含那些将Node.js5升级至全面ES6中被需要的插件。因此,较与ES2015前置项来说会少很多代码翻译。特别是生成器不会被代码翻译就在调试时有帮助。
前置项通过npm安装。它们的包的名字都加上了前缀babel-preset-
。例如,这是如何安装es2015前置项的方法:
npm install babel-preset-es2015
这节阐述配置文件可以从哪里来。
配置信息主要的来源是一个需要被放置到紧靠着你想要编译的输入文件的文件。Babel最先去当前目录看.babelrc
最为输入文件,然后去那个目录的父目录,如此以往。.babelrc
中的内容被理解成JSON并被用作为Babel的各项配置。比如:
{
"presets": [
"es2015"
]
}
.babelignore
文件补充说明.babelrc
:
它被独立得用在.babelrc
中搜寻,却是以同样的形式(通过去输入文件的祖先目录中搜寻)。
它不会代替.babelrc
;两个集合会被合并。
.babelignore
只能指定ignore
配置:它里面的各行会被转成一个数组并被理解为那个配置。
每一个npm包都有一个package.json
。Babel允许你用那个文件去配置,作为.babelrc
的替代品。那么它就必须有一个babel
属性(否则Babel会忽略package.json
文件)。这个属性的值是有配置信息的对象。举个例子:
{
"dependencies": {
···
},
"babel": {
"presets": [
"es2015"
]
}
}
Babel通过去输入文件的祖先目录中以搜索.babelrc
的同样方式在package.json
中搜寻。如果在同一个目录中同时存在.babelrc
和package.json
那么先入文件为主。
在配置信息中的两个属性指定额外配置信息:
env
属性用作详细列举环境的名称('development'
,'production'
等等)携带更多的配置信息至对象。如果env
存在,相对应的当前环境的对象被合并为已经被组装好的配置信息。参见Babel文档获取更多相关环境的信息。extends
属性包含了指向一个路径的拥有更多配置信息的一个文件。
值得注意的是一个次要的配置信息的源文件添加至.babelrc
(或package.json
),它不会替代它。那意味着你将你的项目化分一个目录,你总是需要包括一个.babelrc
。接下来Babel无法在祖先目录中查找并使用一个。这个文件能,打个比方,指定它自己的前置项,它能接入你的构建进程甚至崩掉它(当其中一个前置项不存在时)。
如果在用babel-node
,你能通过命令行指定下面的操作(以及少量其他的):
--presets
--plugins
--ignore
:默认的,每个文件的路径下有'node_modules'
的部分都不被代码翻译。
下面的指令通过babel-node
,并前置es2015-node
和react
,以及使transform-async-to-generator
插件可用以运行my-script.js
。
babel-node \
--presets es2015-node5,react \
--plugins transform-async-to-generator \
my-script.js
下面是一个对webpack配置文件webpack.config.js
的摘录:
var path = require('path');
···
module.exports = {
···
module: {
loaders: [
{
loader: 'babel-loader',
test: path.resolve(__dirname, 'js'),
query: {
presets: ['es2015'],
},
}
]
},
···
};
正如你所见,babel-loader支持指定query
属性的Babel可选项。
- Babel文档很机智。举个例子,这页阐述了Babel可选项。顶部拦可带你去其他页面。
- 另外的,下面的在Babel源文件的代码对弄清他如它如何操作可选项很有帮助:
- option-manager.js包含用来查找及合并Babel可选项的算法。
- _babel-node.js包含用来操作
babel-node
的参数代码。 - 为Node.js准备的babel-register被寄宿在这里.
首页:架设ES6
下一章:Babel:配置标准库和助手