配置文件
Babel的配置文件是.babelrc
,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件,这是必要的一步。
该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
将你需要的规则加入.babelrc
。
{
"presets": [
"es2015"
],
"plugins": []
}
命令行转码
配置好必要的文件后,下一步需要使用Babel提供的工具babel-cli
,用于命令行转码。
$ npm install --global babel-cli
创建一个test.js
,内容如下。
const NAME = 'myName';
转码结果输出到标准输出
$ babel test.js
会在命令行看到转码后的结果。
var NAME = 'myName';
转码结果写入一个文件
$ babel test.js --out-file test.build.js
执行命令后,会出现一个test.build.js
,内容是对test.js
转码后的结果。
整个目录转码
$ babel src --out-dir build
当前项目
上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。
为解决这一问题,通常将babel-cli
安装到项目中。
$ npm install --save-dev babel-cli
然后,改写package.json
中的脚本。
{
// ...
"scripts": {
"babel": "babel src --out-dir build"
}
}
再执行如下命令。
$ npm run babel