摘要：在項目根目錄下創(chuàng)建一個文件，注意這是個配置文件，以點號開頭，沒有后綴。提供了一種可以在瀏覽器中使用的方法，只需兩步就能一勞永逸。

Babel 官方推薦將 Babel 安裝在本地，因為 Babel 的不同版本以及不同轉(zhuǎn)碼規(guī)則會起到不同的效果，全局安裝會帶來不必要的麻煩。在命令提示符中轉(zhuǎn)到自己的項目目錄下：

npm install --save-dev babel-cli

如果你之前出于某些原因執(zhí)行了全局安裝，可以通過下面的代碼卸載全局范圍的 Babel。放心，這并不會影響到項目路徑下的本地安裝。

npm uninstall --global babel-cli

光有一個 babel-cli 什么也做不了，我們還要為 Babel 安裝語法插件。官方提供了幾套預(yù)設(shè)的插件集合，分別適用于 ES2015、React 和 ES7 的一些實驗性特性。只是為了學(xué)習(xí) ES6 的語法的話，選 ES2015 就好了。

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

在項目根目錄下創(chuàng)建一個.babelrc文件，注意這是個配置文件，以點號開頭，沒有后綴。Windows 系統(tǒng)是不允許直接創(chuàng)建這樣格式的文件的，需要借助代碼編輯器來新建文件。創(chuàng)建好后寫入以下內(nèi)容來啟用預(yù)設(shè)：

{    //需要用到的套件
    "presets": ["es2015","react"],
    //需要用到的插件
    "plugins": []
}

至此，我們就完成了 babel-cli 的安裝，可以開始使用了。

對于 Mac 和 Linux 用戶，直接打開 Terminal 并切換到項目文件所在位置，就可以開始用了。下面的命令會將轉(zhuǎn)碼結(jié)果輸出到 Terminal 的標(biāo)準(zhǔn)輸出中：

babel es6.js

當(dāng)然更多的時候我們是希望把結(jié)果放入文件中的：

babel es6.js -o es6-babeled.js

還有更牛的，Babel 支持實時轉(zhuǎn)碼，執(zhí)行下面的命令后，任何對 ES6 代碼的修改，保存之后都會自動轉(zhuǎn)碼，無需人工再干預(yù)。（完成后用 Ctrl+C/Command+C 結(jié)束）

babel es6.js --watch -o es6-babeled.js

Babel 還能批量處理整個路徑下的 JS 文件，下面的代碼把 src 目錄下的文件批量轉(zhuǎn)碼并放到 lib 目錄下：

babel src -d lib

還可以從 Terminal 的標(biāo)準(zhǔn)輸入中讀取文件進行轉(zhuǎn)碼：

babel -o es6-babeled.js < es6.js

官方還有一個更推薦的方法，在package.json文件中的scripts屬性中添加一項"build": "babel src -d build"，之后只要在項目根目錄執(zhí)行npm run build，Babel 就會自動將src目錄下的 js 文件自動轉(zhuǎn)碼并放入build目錄下。

Windows 用戶很快就會會發(fā)現(xiàn)babel命令根本用不了，系統(tǒng)不識別這個命令。檢查一下環(huán)境變量你就會發(fā)現(xiàn)，根本沒有相關(guān)的路徑在里面。如果你執(zhí)行過全局安裝的話，會在 Node.js 的安裝目錄下的 node_global 目錄下看到一個 babel.cmd 文件，把這個路徑添加到環(huán)境變量中，就能用了。如果細看一下文件的內(nèi)容，你就會發(fā)現(xiàn)奧秘所在。

@IF EXIST "%~dp0
ode.exe" (
    "%~dp0
ode.exe"  "%~dp0
ode_modulesabel-cliinabel.js" %*
) ELSE (
    @SETLOCAL
    @SET PATHEXT=%PATHEXT:;.JS;=;%
    node  "%~dp0
ode_modulesabel-cliinabel.js" %*
)

這個文件實際上是先檢查 node.exe 是否存在，若存在，則執(zhí)行node .node_modulesbabel-clibinbabel.js并接受后續(xù)的參數(shù)。這么一看就明白了，說白了 babel 的命令行工具本質(zhì)是個 js 文件，需要用node來運行。照這個思路，我們只需要在項目的根目錄下自行添加一個babel.cmd文件，并寫入以下內(nèi)容，就能使用項目里的babel命令了。

node .
ode_modulesabel-cliinabel.js %*

當(dāng)然，用這個方法的前提是你需要配置好 Node.js 的環(huán)境，并且用 npm 安裝好了 babel-cli，否則會報錯說文件不存在。
之后的用法就和 Mac 和 Linux 下的一樣了，看前面就好，不贅述了。

babel-node
babel-node 是隨 babel-cli 一起安裝的另一款命令行工具，是一個模擬 Node.js 環(huán)境的 REPL（Read-Evel-Print Loop，一種循環(huán)執(zhí)行“讀取-執(zhí)行-輸出”的程序）。執(zhí)行babel-node會進入一個類似 Node.js 的環(huán)境，在這里你可以直接運行 ES6 的代碼。你也可以用形如babel-node es6.js的命令來直接運行用 ES6 編寫的文件，babel-node 會在運行代碼之前先將其編譯成 ES5 的等效代碼，然后執(zhí)行。
甚至可以改寫package.json文件，用 babel-node 替代 node 命令來直接運行。

{

"scripts": {
    "script.js": "babel-node script.js"    // 需替換成實際文件名
}

}

此時執(zhí)行npm run script.js就等同于執(zhí)行babel-node script.js

babel-core
這是 Babel 的核心 API 所在，在項目中加載該模塊var babel = require("babel-core");，然后就可以通過babel.transform(code, options)方法來執(zhí)行轉(zhuǎn)碼，code是待轉(zhuǎn)碼的 ES6 代碼字符串，options提供了一些轉(zhuǎn)碼說明，例如指定語法規(guī)則、啟用一些插件、設(shè)定編碼等，具體用法可以參考這里。

babel-polyfill
Babel 默認只轉(zhuǎn)碼 ES6 的新語法（syntax），而不轉(zhuǎn)換新的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign、Array.from）都不會轉(zhuǎn)碼。如果想讓這寫方法運行，必須require("babel-polyfill")。

babel-doctor
看名字就知道，這個工具大概是排錯用的。沒錯，如果在命令行中執(zhí)行babel命令有問題的，可以用babel-doctor命令檢查一下環(huán)境配置是否正確。主要檢查以下幾項內(nèi)容：
o 項目根目錄下是否存在.babelrc文件
o 是否有重復(fù)的Babel版本，例如同時安裝了 Babel 5 和 Babel 6
o 所有已安裝的 Babel 工具是否升級到了最新版
o npm 的版本是否大于等于 3.3.0
在 Node.js 中使用 Babel
在 Node.js 環(huán)境中，可以直接在 js 文件里調(diào)用 Babel 的轉(zhuǎn)碼功能。
babel-register
該模塊給require()加上一個鉤子，加載它之后，每當(dāng)再 require 其他 js、jsx、es、es6 類型的文件，就會先用 Babel 進行轉(zhuǎn)碼。需要注意的是，使用該模塊的文件本身并不會被轉(zhuǎn)碼，需要從外部執(zhí)行轉(zhuǎn)碼。另外由于是實時轉(zhuǎn)碼，從效率上考慮不適用與生產(chǎn)環(huán)境，僅供學(xué)習(xí)研究使用。

在命令行中使用 Babel 雖然在功能性上沒得挑，但操作起來多少有點麻煩。Babel 提供了一種可以在瀏覽器中使用的方法，只需兩步就能一勞永逸。這個方法唯一的缺點就是實時轉(zhuǎn)碼需要時間，性能上不及預(yù)先轉(zhuǎn)換的方案，因此生產(chǎn)環(huán)境中不推薦使用，僅供學(xué)習(xí)研究使用。
首先我們需要下載browser.js，注意，這是 Babel 5 的版本，Babel 6 開始不再直接提供該文件，需要自行構(gòu)建。
除了從上面的鏈接下載，你也可以用 npm 下載：

npm install babel-core@5

下載后在node_modules/babel-core子目錄中就能找到browser.js文件。
使用方法如下：

有兩點需要注意

browser.js 文件必須放在你自己的 js 文件之前

你自己的文件的類型要寫成type="text/babel"

有時候我們并不需要在項目中操作什么，純粹就想看看 Babel 到底做了什么。為此 Babel 官方提供了一套在線的REPL (Read-Eval-Print-Loop)，可以方便的試用 Babel。

1.Webpack用法

(1). 安裝babel-loader

 npm install babel-loader babel-core --save -dev

(2).

配置loader
     module: {
       loaders: [{
           test: /.js$/,
           exclude: /node_modules/,
           loader: "babel-loader"
       }]

}

(3).配置.babelrc文件

 {
       "presets": [
           // 需要用到的套件
       ],
       "plugins": [
           // 需要用到的插件
       ]
 }

注意：要配置好.babelrc文件

2.Gulp用法

(1).安裝gulp-babel

 npm install gulp-babel --save -dev

2.定義task

(1)

var gulp = require("gulp");
     var babel = require("gulp-babel");
    
     gulp.task("default", function () {
       return gulp.src("src/app.js")
         .pipe(babel())
         .pipe(gulp.dest("dist"));
 });

(2)配置.babelrc文件

 

{
       "presets": [
           // 需要用到的套件
       ],
       "plugins": [
       // 需要用到的插件
       ]
 }

(3)Babel套件與插件

3-1:適用于ES6的套件: babel-preset-es2015

npm install babel-preset-es2015 --save -dev

.babelrc

{
    "presets": ["es2015"]
}

babel-preset-react

3-2:適用于React的套件:babel-preset-react

npm install --save-dev babel-preset-react

.babelrc

{
    "presets": ["react"]
}

3-3:object-assign
適用于Object.assign()
舉例

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

安裝

npm install babel-plugin-transform-object-assign

.babelrc

{
  "plugins": ["transform-object-assign"]
}

3-4:object-rest-spread
適用于展開運算符
舉例

 var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);

安裝

npm install babel-plugin-transform-object-rest-spread

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}