如何使用Babel將ES6轉碼為ES5？
一、前言：
當我們還在沉迷於ES5的時候，殊不知ES6早就已經發布幾年了。時代在進步，WEB前端技術也在日新月異，是時候做些改變了！
ECMAScript 6(ES6)的發展速度非常之快，但現代瀏覽器對ES6新特性支援度不高，所以要想在瀏覽器中直接使用ES6的新特性就得藉助別的工具來實現。
Babel是一個廣泛使用的轉碼器，babel可以將ES6程式碼完美地轉換為ES5程式碼，所以我們不用等到瀏覽器的支援就可以在專案中使用ES6的特性。
babel 6與之前版本的區別：
之前版本只要安裝一個babel就可以用了，所以之前的版本包含了一大堆的東西，這也導致了下載一堆不必要的東西。但在babel 6中，將babel拆分成兩個包：babel-cli和babel-core。如果你想要在CLI(終端或REPL)使用babel就下載babel-cli，如果想要在node中使用就下載babel-core。 babel 6已結儘可能的模組化了，如果還用babel 6之前的方法轉換ES6，它會原樣輸出，並不會轉化，因為需要安裝外掛。如果你想使用箭頭函式，那就得安裝箭頭函式外掛npm install babel-plugin-transform-es2015-arrow-functions。
本文中，我們不討論ES6的語法特性，重點講的是如何將ES6程式碼轉碼為ES5程式碼。
二、Babel轉碼：
如果你並沒有接觸過ES6，當你看到下面的程式碼時，肯定是有點懵逼的（這是什麼鬼？心中一萬頭神獸奔騰而過），但是你沒看錯，這就是ES6。不管你看不看它，它都在這裡。
| 1 2 3 4 5 6 7 8 9 10 |
this._friends.forEach(f =>
|
實際上，上面的這段程式碼通過Babel轉換後，會變成：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
return function () {
|
好，言歸正傳，我們嘗試下用一些方法來實現上面的轉碼效果吧。
1、直接安裝Babel法：
1.1) 首先全域性安裝Babel。
| 1 2 3 4 5 |
|
如果將babel直接安裝到專案中，它會自動在package.json檔案中的devDependencies中加入babel-cli。如下所示：
| 1 2 3 4 5 6 |
|
1.2) Babel的配置檔案是.babelrc，存放在專案的根目錄下。使用Babel的第一步，就是配置這個檔案。
這個檔案的完整檔名是 “.babelrc”，注意最前面是有個“.”的。由於我的電腦是Windows系統，所以在新建這個檔案的時候老是提示 “必須鍵入檔名” 的錯誤。後來谷歌了下，發現建立這個檔案的時候，把檔名改成“.babelrc.”，注意是前後都有一個點，這樣就可以儲存成功了
| 1 2 3 4 |
|
1.3) presets欄位設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。
點選此處到Babel中文官網presets配置頁面：Babel Plugins
| 1 2 3 4 5 6 7 8 9 10 11 |
|
1.4) 根據官網的提示，當我們用npm安裝好這些外掛工具之後，我們需要將這些規則加入到.babelrc中去。如下所示：
| 1 2 3 4 5 6 7 8 |
|
1.5) 轉碼、轉碼的規則：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
注：整個檔案轉碼成ES5成功之後，還需要用browserify瀏覽器模板解析主js檔案，才可以在瀏覽器上執行！
參考這個：https://mp.csdn.net/postedit/85293934
2、工具配置法：
實際上，我們可以通過前端自動化的很多工具來實現ES6的轉碼配置，比如，常見的grunt、gulp、Webpack和Node等。下面我就簡單的說下我較為熟悉的gulp配置法。
點選此處到Babel中文官網Tool配置頁面：Babel Tool
2.1) 首先，我們需要在專案中安裝gulp：
| 1 |
|
2.2) 然後，我們需要在專案中安裝gulp-babel：
| 1 |
|
當執行完上面的兩個命令後，我們會發現根目錄下的package.json檔案內容已經被自動修改成：
| 1 2 3 4 5 6 7 |
|
2.3) 編寫gulpfile.js檔案，檔案內容如下所示：
| 1 2 3 4 5 6 7 8 |
|
當我們在當前專案目錄下執行如下命令後，會發現原本在src資料夾中的a.js(按照ES6標準編寫的)檔案已經被轉碼成ES5標準的a.js，並放在了lib資料夾裡面。
| 1 2 3 4 |
|
三、其他：
以上兩種方法，在我本地親測有效。當然，你可以選擇更多其他的工具來處理，殊途同歸，Anyway，讓我們一起來擁抱ES6吧！
當然，你也可以選擇線上轉碼（測試體驗用），地址是：http://babeljs.cn/repl/。