使用babel轉碼器，讓瀏覽器支持es6語法

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，可是很多瀏覽器並不支持es6語法，所以我們需要一個轉碼工具，

把es6的語法轉換成瀏覽器支持的javascript，Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼。在babel的安裝設置里我選用的是使用node

來進行安裝。

1、在你的項目下輸入命令：

npm install --save-dev babel-core

按回車健，運行如下：

2.配置文件.babelrc 

在項目根目錄下建立.babelrc 文件，因為我的是window系統，在更改文件名時會提示：

解決這個問題的辦法是把文件名更改成".babelrc."。注意，前后都有".",。

配置.babelrc文件如下：

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

3、輸入轉換成es5規則的命令：

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

4、輸入react 語法規則命令(用不到react的可以不用)：

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

5、轉換規則命令：

# 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

然后將這些規則寫入 .babelrc文件：

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

6、命令行轉碼babel-cli

 npm install --save-dev babel-cli

基本用法如下：

# 轉碼結果輸出到標准輸出
$ 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。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

轉碼的時候就可以使用如下命令：

npm run build

參考文獻：http://es6.ruanyifeng.com/#docs/intro