Babel是广泛使用的ES6转码器，可以将ES6代码转为ES5代码。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
Babel的配置文件是.babelrc ，存放在项目的根目录，用来设置转码规则和插件。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，官方提供规则集，可以根据需要安装。
# 最新转码规则
$ npm install --save-dev babel-preset-latest
# react 转码规则
$ npm install --save-dev babel-preset-react
# 不同阶段语法提案的转码规则（共有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": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
babel-cli
Babel提供babel-cli工具，用于命令行转码。
安装babel-cli
npm install --global babel-cli
基本用法
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
为支持不同项目使用不同版本的Babel，可以将babel-cli安装在项目中。
# 安装
$ npm install --save-dev babel-cli
改写package.json
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
转码时，执行命令
npm run build
babel-node
babel-cli工具自带babel-node命令，提供支持ES6的REPL的环境，支持Node的REPL的所有功能，直接运行ES6代码。
进入REPL环境
$ babel-node
> (x => x * 2)(1)
2
babel-node命令可以直接运行ES6脚本
$ babel-node es6.js
2
当babel-cli安装在项目中时，针对babel-node改写package.json
{
"scripts": {
"script-name": "babel-node script.js"
}
}
babel-register
babel-register模块改写require命令，并为它加上钩子。每当使用require加载.js、jsx、.es、.es6后缀名的文件时，就会用Babel进行转码。
$ npm install --save-dev babel-register
在使用时，首先加载babel-register
require("babel-register");
require("./index.js");
babel-register只会对require命令加载的文件转码，而不会对当前文件转码。
babel-core
如果某些代码需要调用Babel的API进行转码，可以使用babel-core模块
$ npm install babel-core --save
在项目中调用babel-core
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});
// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
下面是个简单的例子
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
.transform(es6Code, {
presets: ['latest']
})
.code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
babel-polyfill
Babel默认只转换新的js句法，而不转换新的API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及定义在全局对象的一些方法，如Object.assign。
此时可以尝试使用babel-polyfill
$ npm install --save babel-polyfill
引入babel-polyfill
import 'babel-polyfill';
// 或者
require('babel-polyfill');
Babel默认不转码的API非常多，可查看babel-plugin-transform-runtime模块的definitions.js文件。
浏览器
Babel也可以用于浏览器环境，但自Babel 6.0开始，不再支持提供浏览器版本，需要构建工具构建；或者使用babel-standalone模块提供的浏览器版本，将其插入网页。
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
网页实时的将ES6代码转为ES5面对性能会产生影响。
将代码转换为浏览器可以使用的脚本，以Babel配合Browserify为例。首先，安装babelify模块
$ npm install --save-dev babelify babel-preset-latest
转换ES6脚本
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ latest ] ]
江面将ES6脚本script.js转为bundle.js，供浏览器使用。
在package.json配置，就不用每次命令行都输入参数
{
"browserify": {
"transform": [["babelify", { "presets": ["latest"] }]]
}
}
配合工具
许多工具需要Babel进行前置转码，如ESLint和Mocha
ESLint用于静态检查代码的语法和风格
$ npm install --save-dev eslint babel-eslint
在醒目根目录，新建配置文件.eslintrc
{
"parser": "babel-eslint",
"rules": {
...
}
}
在package.json 加入相应的scripts脚本
{
"name": "my-module",
"scripts": {
"lint": "eslint my-files.js"
},
"devDependencies": {
"babel-eslint": "...",
"eslint": "..."
}
}
Mocha是测试框架，如果需要使用ES6语法的测试脚本，可以修改package.json 和scripts.test
"scripts": {
"test": "mocha --ui qunit --compilers js:babel-core/register"
}
其中，--compilers 参数指定脚本的转码器，规定后缀名为js的文件，都需要使用babel-core/register 先转码。
【参考】