Babel是一個(gè)廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行版述。這意味著铸本，你可以用ES6的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持体斩。下面是一個(gè)例子梭稚。
// 轉(zhuǎn)碼前
input.map(item => item + 1);
// 轉(zhuǎn)碼后
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數(shù)，這個(gè)特性還沒有得到廣泛支持絮吵，Babel將其轉(zhuǎn)為普通函數(shù)弧烤，就能在現(xiàn)有的JavaScript環(huán)境執(zhí)行了。
配置文件.babelrc
Babel的配置文件是.babelrc蹬敲，存放在項(xiàng)目的根目錄下暇昂。使用Babel的第一步，就是配置這個(gè)文件伴嗡。
該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件急波，基本格式如下。
{
"presets": [],
"plugins": []
}```
```presets```
字段設(shè)定轉(zhuǎn)碼規(guī)則瘪校，官方提供以下的規(guī)則集澄暮，你可以根據(jù)需要安裝。
***
.# ES2015轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-es2015
.# react轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react
.# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段）阱扬，選裝一個(gè)
$ 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
然后泣懊，將這些規(guī)則加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
注意麻惶，以下所有Babel工具和模塊的使用馍刮，都必須先寫好.babelrc。
1.命令行轉(zhuǎn)碼babel-cli
Babel提供babel-cli工具用踩，用于命令行轉(zhuǎn)碼渠退。
它的安裝命令如下：
$ npm install --global babel-cli
基本用法如下：
.#轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js
.#轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
.# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js --out-file compiled.js
.#或者
$ babel example.js -o compiled.js
.#整個(gè)目錄轉(zhuǎn)碼
.# --out-dir 或 -d 參數(shù)指定輸出目錄
$ babel src --out-dir lib
.# 或者
$ babel src -d lib
.# -s 參數(shù)生成source map文件
$ babel src -d lib -s
上面代碼是在全局環(huán)境下忙迁，進(jìn)行Babel轉(zhuǎn)碼。這意味著碎乃，如果項(xiàng)目要運(yùn)行姊扔，全局環(huán)境必須有Babel，也就是說項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴梅誓。另一方面恰梢，這樣做也無法支持不同項(xiàng)目使用不同版本的Babel。
一個(gè)解決辦法就是將 babel-cli安裝在項(xiàng)目之中梗掰。
.#安裝
$ npm install --save-dev babel-cli
然后嵌言，改寫package.json。
{ // ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
轉(zhuǎn)碼的時(shí)候及穗，就執(zhí)行下面的命令摧茴。
$ npm run build
2.babel-node
babel-cli工具自帶一個(gè)babel-node命令，提供一個(gè)支持ES6的REPL環(huán)境埂陆。它支持Node的REPL環(huán)境的所有功能苛白，而且可以直接運(yùn)行ES6代碼。
它不用單獨(dú)安裝焚虱，而是隨babel-cli一起安裝购裙。然后，執(zhí)行babel-node就進(jìn)入REPL環(huán)境鹃栽。
$ babel-node
> (x => x * 2)(1)2
babel-node
命令可以直接運(yùn)行ES6腳本躏率。將上面的代碼放入腳本文件es6.js
，然后直接運(yùn)行民鼓。
$ babel-node es6.js2
babel-node
也可以安裝在項(xiàng)目中薇芝。
$ npm install --save-dev babel-cli
然后，改寫package.json摹察。
{
"scripts": {
"script-name": "babel-node script.js"
}
}
上面代碼中恩掷，使用babel-node替代node，這樣script.js本身就不用做任何轉(zhuǎn)碼處理供嚎。
3.babel-register
babel-register模塊改寫require命令黄娘，為它加上一個(gè)鉤子。此后克滴，每當(dāng)使用require加載.js逼争、.jsx、.es
和.es6后綴名的文件劝赔，就會(huì)先用Babel進(jìn)行轉(zhuǎn)碼誓焦。
$ npm install --save-dev babel-register
使用時(shí)，必須首先加載babel-register。
require("babel-register");
require("./index.js");
然后杂伟，就不需要手動(dòng)對(duì)index.js轉(zhuǎn)碼了移层。
需要注意的是，babel-register只會(huì)對(duì)require命令加載的文件轉(zhuǎn)碼赫粥，而不會(huì)對(duì)當(dāng)前文件轉(zhuǎn)碼观话。另外，由于它是實(shí)時(shí)轉(zhuǎn)碼越平，所以只適合在開發(fā)環(huán)境使用频蛔。
