一、ES6 參考

• http://es6.ruanyifeng.com/
• ECMAScript當前所有提案 Github.com/tc39/ecma262

二、支持能力

• http://kangax.github.io/compat-table/es6/
• https://github.com/paulmillr/es6-shim

三、運行環境

• https://github.com/creationix/nvm
• https://nodejs.org/en/
• https://www.npmjs.com/

四、特性檢測

1. 查看Node所有已經實現的ES6特性

    ?  ~ node --v8-options | grep harmony

2. 檢查各種運行環境對ES6的支持情況
   es-checker

    ?  ~ npm install -g es-checker

3. 查看本機支持ES6的程度

    ?  ~ es-checker

五、Babel轉碼器

• babel 官網
• Babel 用戶手冊

1. 工程初始化

    ?  ES6 git:(master) ? npm init   
（$ mkdir es2015_demo && cd es2015_demo && git init && npm init）

2. 本地安裝

    ?  ES6 git:(master) ? npm install --save-dev babel-cli (建議安裝在當前工程目錄,非全局)
    ?  ES6 git:(master) ? npm install babel-preset-stage-0 --save-dev  (ES7)
/*
      ?  ~ npm install -g babel-cli  
     npm uninstall --global babel-cli
     */

3. 轉碼前后(ES6->ES5)

    //轉碼前
    [1,2,3].map(n => console.log(n + 1));

    //轉碼后
    [1, 2, 3].map(function(n) {
        return console.log(n + 1);
    });

4. 配置文件.babelrc
   Babel的配置文件是.babelrc，存放在項目的根目錄下(使用Babel的第一步，就是配置這個文件);
   • 創建 .babelrc

    ?  ES6 git:(master) ? touch .babelrc

+ .babelrc該文件用來設置轉碼規則和插件，基本格式如下:

    {
        "presets": [],
        "plugins": []
    }

5. 為presets字段設定轉碼規則(語法集)，官方提供以下的規則集，可以根據需要安裝
   • ES6轉碼規則

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

• react轉碼規則

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

• ES7不同階段語法提案的轉碼規則（共有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

6. 安裝轉碼規則集

?  ES6 git:(master) ? npm install --save-dev babel-preset-es2015
?  ES6 git:(master) ? npm install --save-dev babel-preset-react
?  ES6 git:(master) ? npm install --save-dev babel-preset-stage-3

7. 然后，將這些規則加入.babelrc

    {
        "presets": [
            "es2015",
            "react",
            "stage-3"
        ],
        "plugins": []
    }

8. babel基本用法

    # 轉碼結果輸出到標準輸出
    $ babel example.js

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

    # 整個目錄轉碼 (--out-dir 或 -d 參數指定輸出目錄)
    $ babel src --out-dir lib
    或者
    $ babel src -d lib

    # -s 參數生成source map文件
    $ babel src -d lib -s

六、package.json配置

1. 工程初始化,生成 package.json

    ?  ES6 git:(master) ? npm init   

2. 改寫package.json

    "devDependencies": {
        "babel-cli":"^6.6.5",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-3": "^6.5.0"
    },
    "scripts": {
        "build": "babel src -d lib"  //將指定目錄轉碼
    },

3. 轉碼執行以下命令

    ?  ES6 git:(master) ? npm run build

七、babel 之 babel-node

babel-cli 工具自帶一個 babel-node 命令，提供一個支持ES6的REPL環境;

1. 它支持Node的REPL環境的所有功能，而且可以直接運行ES6代碼.

    $ babel-node
    > (x => x * 2)(1)
    2

2. 直接運行腳本文件

    $ babel-node es6.js
    2

3. 執行腳本命令 運行腳本
   • 更新package.json:

    "scripts": {
        "build": "babel src -d lib",
        "script": "babel-node *.js"
    },

+ 執行命令

    ?  ES6 git:(master) ? npm run script

八、瀏覽器環境

REPL ES6->ES5 在線編譯器

九、與其他工具的配合

許多工具需要Babel進行前置轉碼，這里舉兩個例子：ESLint 和 Mocha;

1. ESLint用于靜態檢查代碼的語法和風格，安裝命令如下:

    ?  ES6 git:(master) ? npm install --save-dev eslint babel-eslint

2. 在項目根目錄下，新建一個配置文件.eslintrc :

    ?  ES6 git:(master) ? touch .eslintrc

3. 在其中加入parser字段 :

{
    "parser": "babel-eslint",
    "rules": {

    }
}

4. 再在package.json之中，加入相應的 scripts 腳本

  "devDependencies": {
      ...
      "eslint": "^2.10.2",
      "babel-eslint": "^6.0.4"
  },
  "scripts": {
        ...
      "eslint": "eslint my-files.js"
  },

5. Mocha則是一個測試框架，如果需要執行使用ES6語法的測試腳本，可以修package.json的scripts.test

    "scripts": { "test": "mocha --ui qunit --compilers js:babel-core/register"}

上面命令中，--compilers參數指定腳本的轉碼器，規定后綴名為js的文件，都需要使用babel-core/register先轉碼;