安裝Babel

官方文檔建議我們根據單個項目進行本地安裝，原因是不同的項目可以依賴不同版本的 Babel，使你的項目更方便移植、更易於安裝。
在項目的根目錄下使用命令行工具（CMD等）執行下面代碼

npm install --save-dev babel-cli

安裝編譯規則

官方提供了幾套預設的規則集，分別適用於 ES2015、React 和 ES7 的一些實驗性特性。我們可以根據需要安裝（如果只需要學習 ES6 語法的話，就只選 ES2015 好了）。

# ES2015轉碼規則
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
 

.babelrc 文件配置

（1）在項目根目錄下創建一個 .babelrc 文件。註意：Windows 系統無法直接創建這樣的文件，我們可以借助命令行、或者代碼編輯器來創建。
（2）該文件中輸入如下內容來啟用預設（假設我們用到了 ES2015 這一個轉碼規則）。

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

好了，現在Babel的安裝告一段落，接下來開始在phpStorm中設置Babel的配置了

在IDEA(phpStorm)中設置Babel

1.首先在Settings->Languages & Frameworks中選擇JavaScript選項，然後將右側JavaScript的版本設置為ECMAScript6

2.然後在搜索框中搜索File Watcher，點圖中的加號按鈕，選擇babel就會彈出一個New Watcher窗口

3.在Program這項裏面放入babel.cmd文件的入徑,我的路徑是(E:\dev\phpStudy\PHPTutorial\WWW\jinzhai\node_modules.bin\babel.cmd)

4.將Arguments項裏面的代碼替換成$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015，點擊OK，應用即可

使用

在項目中新建test.js文件編寫ES6語法的代碼，在根目錄下會自動生成dist文件夾及對應的編譯後的ES5文件

祝使用愉快。

在IDEA(phpStorm)中使用Babel編譯ES6