藉助Babel 6平臺使用ES6新特性

ES6新特性

關於ES6新特性我就不廢話太多了，這裏僅簡單羅列一下：

1. 箭頭函數
   

2. 類

3. 加強的Object字面量 

4. 模板字符串

5. 解構

6. 參數默認值，不定參數，拓展參數

7. let與const 關鍵字

8. for of 值遍歷

9. 模塊

10. Map和Set類型

11. Proxies

12. Symbols

13. Math，Number，String，Object 的新API

14. Promises異步對象

參考1：http://www.cnblogs.com/Wayou/p/es6_new_features.html

參考2：http://babeljs.io/docs/learn-es2015/

Babel 6

因爲目前主要瀏覽器不可以徹底支持ES6，所以一般藉助一些工具將ES6語法翻譯成ES5，Babel便是這樣一款工具。

最新的Babel 6與Babel 5及更早的版本有很大的差異，Babel變成了一個平臺，而其餘各類工具則以插件的形式安裝。

經過控制檯全局安裝babel：

npm install -g babel-cli

此時，全局安裝的模塊默認位於「C:\Users\zhl\AppData\Roaming\npm\node_modules」（Windows系統），爲了正常使用Babel，必定要添加環境變量「NODE_PATH」，並指向上述路徑。

爲了使用Babel的翻譯功能，安裝ES6翻譯插件（仍然全局安裝）：

npm install -g babel-preset-es2015

此時，在任意工做目錄，創建src和lib兩個文件夾，而且在src文件夾中創建.babelrc文本文件，寫入以下內容啓用ES6翻譯預設配置：

{
  "presets": ["es2015"]
}

此時，在命令行中，CD到當前工做目錄，運行以下命令：

babel src --watch --out-dir lib

此時，在src文件夾中，創建的任何擴展名爲js（或者es6）的文件均會被翻譯成ES5語法，並將輸出的文件保存到lib文件夾下，因爲啓用了--watch參數，任何修改均會被當即翻譯。

再補充以下幾個經常使用命令：

1. 翻譯指定文件：babel script.js --out-file script-compiled.js
   

2. 當文件改動時自動翻譯：babel script.js --watch --out-file script-compiled.js

3. 翻譯文件夾下全部JS：babel src --out-dir lib

4. 包含map文件：babel script.js --out-file script-compiled.js --source-maps

使用Polyfill

Polyfill是一個插件，用於提供那些開發者們但願瀏覽器原生提供支持的功能。Babel翻譯後的JS部分仍須要基於Polyfill才能正常運行，所以，若是是在瀏覽器環境中，應在全部腳本以前引入polyfill.js。

使用以下命令全局安裝polyfill插件：

npm install -g babel-polyfill

安裝完畢後應該能夠在C:\Users\zhl\AppData\Roaming\npm\node_modules\babel-polyfill\dist中找到polyfill.min.js文件。