Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

官方手冊傳送門

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

不建議進(jìn)行全局安裝，這樣可以保證各個項目獨(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之后 分離為多個包
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個階段），選裝一個
$ 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é)果寫入一個文件

# 轉(zhuǎn)碼結(jié)果寫入一個文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉(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在項目中可以通過修改 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，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。
該文件用來設(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等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)碼。
舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉(zhuǎn)碼這個方法。如果想讓這個方法運(yùn)行，必須使用babel-polyfill，為當(dāng)前環(huán)境提供一個墊片。
Babel默認(rèn)不轉(zhuǎn)碼的API非常多，詳細(xì)清單可以查看babel-plugin-transform-runtime
模塊的definitions.js文件。
安裝命令如下。

npm install --save babel-polyfill

然后只需要在文件頂部導(dǎo)入 polyfill 就可以了：

import "babel-polyfill";