1. 本地安裝

  $ npm install --save-dev babel-cli

2. 編譯插件
   ES2015轉碼規則

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

React ES2015轉碼規則

$ 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

兼容export default {} 支持

$ npm install --save-dev babel-plugin-add-module-exports

根目錄創建一個名為 .babelrc 的文件
presets 設置轉碼規則
plugins 添加插件

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

3. babel-polyfill插件
   Babel默認只轉換新的JavaScript句法（syntax
   ），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。Babel
   默認不轉碼的API非常多，詳細清單可以查看 definitions.js
   為了完整使用 ES6的 API ，支持瀏覽器缺失API：

$ npm install -save-dev babel-polyfill

然后，在需要使用的文件的頂部引入

import "babel-polyfill"

node.js 中：

require('babel-polyfill');

webpack.config.js 中：

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

4. 為了避免babel在編譯中輸出重復，使用babel-runtime

npm install --save-dev babel-plugin-transform-runtime

.babelrc添加

{
  "plugins": ["transform-runtime"]
}

詳見官方文檔

5. 配置瀏覽器環境
   Babel也可以用于瀏覽器環境。但是，從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具，可以通過安裝5.x版本的babel-core模塊獲取。

$ npm install babel-core@5

webpack打包，webpack加載器為我們處理各種文件。我們將選用一個特殊的babel-loader來將我們的ES6代碼轉譯為ES5代碼

$ npm install babel-loader