Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器班套，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行坦康。
官方手冊(cè)傳送門
https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md
不建議進(jìn)行全局安裝惨奕，這樣可以保證各個(gè)項(xiàng)目獨(dú)立環(huán)境。
1.安裝
全局安裝
npm install -g babel
npm install -g babel-cli
局部安裝
npm install --save-dev babel
npm install --save-dev babel-cli
babel6之后 分離為多個(gè)包
babel-cli 命令行
babel-core node api 以及 require hook
babel-polyfill 提供es2015的環(huán)境
轉(zhuǎn)化為ES5等需要安裝插件,根據(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
2.使用
2.1命令行轉(zhuǎn)化js文件：
babel es6.js --presets es2015
轉(zhuǎn)碼結(jié)果輸出到命令行
2.2轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# 轉(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
2.3在項(xiàng)目中可以通過修改 package.json 文件
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
現(xiàn)在抑胎，我們不直接從命令行運(yùn)行 Babel 了，取而代之我們將把運(yùn)行命令寫在 npm scripts 里渐北，這樣可以使用 Babel 的本地版本阿逃。
只需將 "scripts" 字段添加到你的 package.json 文件內(nèi)并且把 babel 命令寫成 build 字段。.
{
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
現(xiàn)在可以在終端里運(yùn)行：
npm run build
這將以與之前同樣的方式運(yùn)行 Babel，但這一次我們使用的是本地副本恃锉。
3.配置.babelrc配置文件
Babel的配置文件是.babelrc搀菩，存放在項(xiàng)目的根目錄下。使用Babel的第一步破托，就是配置這個(gè)文件肪跋。
該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下炼团。
{
"presets": [],
"plugins": []
}
然后澎嚣，將這些規(guī)則加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
4.babel-polyfill
Babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法（syntax）瘟芝，而不轉(zhuǎn)換新的API易桃，比如Iterator、Generator锌俱、Set晤郑、Maps、Proxy贸宏、Reflect造寝、Symbol、Promise等全局對(duì)象吭练，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼诫龙。
舉例來說，ES6在Array對(duì)象上新增了Array.from方法鲫咽。Babel就不會(huì)轉(zhuǎn)碼這個(gè)方法签赃。如果想讓這個(gè)方法運(yùn)行，必須使用babel-polyfill分尸，為當(dāng)前環(huán)境提供一個(gè)墊片锦聊。
Babel默認(rèn)不轉(zhuǎn)碼的API非常多，詳細(xì)清單可以查看babel-plugin-transform-runtime
模塊的definitions.js文件箩绍。
安裝命令如下孔庭。
npm install --save babel-polyfill
然后只需要在文件頂部導(dǎo)入 polyfill 就可以了：
import "babel-polyfill";
