隨著時(shí)間的推移，瀏覽器對(duì)ES6支持度已經(jīng)越來越高了，超過90%的 ES6 語法特性都實(shí)現(xiàn)了。雖然有些瀏覽器對(duì)ES6的支持程度已經(jīng)很高了（Chrome59 97%，Safari10 99%），但是很多人使用的IE對(duì)ES6的支持任然很不理想（IE11 11%），所以在實(shí)際工程應(yīng)用中，我們還需要將ES6轉(zhuǎn)化成ES5。各大瀏覽器的最新版本，對(duì) ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。

環(huán)境支持

Node 是 JavaScript 的服務(wù)器運(yùn)行環(huán)境（runtime）。它對(duì) ES6 的支持度更高，除了那些默認(rèn)打開的功能，還有一些語法功能已經(jīng)實(shí)現(xiàn)了，但是默認(rèn)沒有打開。使用下面的命令，可以查看 Node 已經(jīng)實(shí)現(xiàn)的 ES6 特性。

node --v8-options | grep harmony

上面命令的輸出結(jié)果，會(huì)因?yàn)榘姹镜牟煌兴煌?/p>

轉(zhuǎn)碼

通過特定的轉(zhuǎn)碼器，如Babel，或在線的轉(zhuǎn)換器，將ES6轉(zhuǎn)換成ES5再進(jìn)行部署。

Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。相對(duì)于之前的Babel5，Babel6不再是一個(gè)整的大的package，而是拆分了很多個(gè)小的package可供選擇安裝，可以根據(jù)項(xiàng)目進(jìn)行自定義。下面介紹Babel的開發(fā)環(huán)境的配置。

1. 命令行使用（手動(dòng)編譯）

1. 安裝babel-cli，支持命令行使用babel

npm install --save-dev babel-cli

完成之后，我們還不能編譯ES6文件，因?yàn)?babel 不再包含任何 transform 功能，babel6里把它們作為插件（plugin）分割出去，需要我們自己定義。

2. 安裝babel-preset-env
   要想編譯ES6文件，我們必須安裝相關(guān)的插件，babel-preset-env打包了所有用于轉(zhuǎn)換ES6的插件，安裝babel-preset-env:

npm install --save-dev babel-preset-env

babel還有babel-preset-es2015，babel-preset-es2016等插件，每一年的preset僅編譯那一年的批準(zhǔn)的規(guī)則，而babel-preset-env則包含es2015，es2016，es2017和latest等。

3. 配置
   安裝完babel-preset-env之后，還需要一步，在package.json或.babelrc文件啟用babel-preset-env:

"babel": { 
   "presets": [ 
       "env" 
   ] 
}

4. 編譯
   完成以上安裝后，就可以編譯文件了：

# 轉(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
# 轉(zhuǎn)碼整個(gè)目錄 --out-dir 或 -d 參數(shù)指定輸出目錄
babel src --out-dir lib
#忽略spec和test文件
babel src --out-dir lib --ignore spec.js,test.js
# -s 參數(shù)生成source map文件
babel src -d lib -s

更多選項(xiàng)

2. Webstorm編譯（IDE）

1. 開啟ES6語法支持
   Webstorm已經(jīng)支持ES6語法了，但是默認(rèn)情況下沒有開啟，需要我們手動(dòng)開啟，打開Preferences->Languages & Frameworks->JavaScript，在選項(xiàng)中設(shè)置為ES6。

   
   
   image.png

2. 安裝babel-cli和babel-preset-env

npm install --save-dev babel-preset-env babel-cli

3. 配置babel File Watcher
   File Watcher是一個(gè)Webstorm內(nèi)置工具，可以在文件發(fā)生變化時(shí)自動(dòng)執(zhí)行相關(guān)命令，對(duì)于babel，已經(jīng)有預(yù)存的配置，我們激活配置即可使用：
   Preferences->Tools->File watchers
   點(diǎn)擊'+'按鈕，選擇babel，在File watcher配置中，指定babel-cli在node_modules中的路徑：
   
   image.png
   
   在Webstorm 2017.1中，編譯過的文件存放在dist文件夾中，可以自己設(shè)置輸出文件路徑，輸入文件路徑，編碼的文件類型等參數(shù)，更多配置請(qǐng)參考Webstorm官網(wǎng)。當(dāng)然，你也可以在package.json或者.babelrc配置文件中指定，添加適合你工程的配置。

3.VS Code配置

1. 安裝babel-cli和babel-preset-env

npm install --save-dev babel-cli babel-preset-env

2. 配置package.json，設(shè)置生成souremaps

{
  "scripts": {
    "build": "babel src -d dist --source-maps"
  }
}

3. 在.vscode目錄下的tasks.json文件中寫入如下配置，如果沒有這個(gè)文件，就創(chuàng)建一個(gè)

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            //此處第二個(gè)參數(shù)"build"要與上一步中的scripts中的編譯腳本的名字一樣
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

4. 打開.vscode目錄下的launch.json文件，在 configurations中添加如下配置，通過使用preLaunchTask
   在啟動(dòng)前進(jìn)行編譯，如果沒有l(wèi)aunch.json文件，打開調(diào)試，在啟動(dòng)程序一欄，下拉，添加配置即可

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動(dòng)程序",
            "program": "${workspaceRoot}/src/index.js",//需要編譯的文件
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            //此處的"build"要和上一步的tasks中的taskName一樣
            "preLaunchTask": "build",
            "runtimeExecutable": null,
            "runtimeArgs": ["--nolazy"],
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true,
               "outFiles": [
                "${workspaceRoot}/dist"http://輸出文件的目錄
            ]
        }
    ]

image.png

5. 啟動(dòng)調(diào)試或者按F5，就可以在輸出目錄下看到編譯好的文件

4. 瀏覽器環(huán)境

Babel 也可以用于瀏覽器環(huán)境。但是，從 Babel 6.0 開始，不再直接提供瀏覽器版本，而是要用構(gòu)建工具構(gòu)建出來。如果你沒有或不想使用構(gòu)建工具，可以使用babel-standalone模塊提供的瀏覽器版本，將其插入網(wǎng)頁(yè)。

<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>

注意，網(wǎng)頁(yè)實(shí)時(shí)將 ES6 代碼轉(zhuǎn)為 ES5，對(duì)性能會(huì)有影響。生產(chǎn)環(huán)境需要加載已經(jīng)轉(zhuǎn)碼完成的腳本。
更多轉(zhuǎn)換方法請(qǐng)參考 《ECMAScript 6 入門》

5. 關(guān)于Babel

1. babel-node
   babel-cli工具自帶一個(gè)babel-node命令，提供一個(gè)支持ES6的REPL(Read-Eval-Print-Loop)環(huán)境。它支持Node的REPL環(huán)境的所有功能，而且可以直接運(yùn)行ES6代碼。它不用單獨(dú)安裝，而是隨babel-cli一起安裝。然后，執(zhí)行babel-node就進(jìn)入REPL環(huán)境。

#進(jìn)入REAL環(huán)境
babel-node
#babel-node命令可以直接運(yùn)行ES6腳本(.js可以省略)
babel-node test.js
#babel-node也可以安裝在項(xiàng)目中
npm install --save-dev babel-cli

2. babel-polyfill
   這將模擬一個(gè)完整的ES2015 +環(huán)境，旨在用于應(yīng)用程序而不是庫(kù)/工具。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è)墊片。

#因?yàn)樗且粋€(gè)填充工具（在源碼之前運(yùn)行），所以它是一個(gè)dependency，而不是devDeoendencynpm 
install --save babel-polyfill

然后在程序的入口包含polyfill，確保在其他引用聲明之前調(diào)用

#node
require("babel-polyfill");
#es6
import("babel-polyfill");

當(dāng)使用webpack時(shí)，在webpack.config.js文件的入口數(shù)組中添加babel-polyfill:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

參考文獻(xiàn)

1. 《ECMAScript 6 入門》
2. Webstorm，Babel 官方文檔
3. debugging in Visual Studio Code with babel-node

說明

所有內(nèi)容都已在macOS Sierra 10.12.5，cnpm@4.5.0，npm@3.10.10，node@6.10.2，babel-cli@6.24.1，babel-preset-env@1.5.2，Webstorm 2017.1，VS Code@1.13.1環(huán)境下實(shí)現(xiàn)并驗(yàn)證。
PS：初次寫作，如有不足與錯(cuò)誤之處，請(qǐng)多多指教。