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

安裝Babel

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

npm install --save-dev babel-cli

安裝編譯規則

官方提供了幾套預設的規則集，分別適用於 ES201五、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文件

祝使用愉快。