IDEA - Babel插件

2.安裝Babel插件
在IDEA中，打開Terminal窗口，而後輸入命令並回車

npm install --save-dev babel-cli babel-preset-env

若是提示找不到npm則須要重啓下IDEA。

3.安裝File Watchers插件
File Watchers插件是一個框架，用於監視特定文件的修改，而後按照用戶的配置執行某些特殊的指令。如今我要File Watchers監視es6的文件，文件一旦改動就調用Babel轉化爲es5文件。
點擊菜單欄上的File->Settings->Plugins->Browse Repositories。在打開的倉庫搜索頁面上輸入 file watchers 搜索並選擇安裝。安裝插件後若是提示須要重啓生效則選擇重啓。

 

4.配置Babel
從新打開IDEA後，點擊菜單欄中的File->Settings->Tools->File Watchers打開File Watchers的設置頁。若是右側菜單裏已經有配置條目了，則刪除已存在的設置。
而後點擊右上角綠色的的「+」，在下拉菜單中選擇Babel打開New Watcher窗口。窗口中有不少設置。具體說明以下

Name:
監視規則的名稱，隨便寫，好比 Babel:convert es6 to es5
File type:
監視的文件類型，具體的類型能夠在Settings->Editor->File Types中查看和修改。在這裏選擇ECMAScript6,包含了全部擴展名是es6的文件（*.es6）
Scope:
源，須要監視哪些文件，這裏選擇Project Files 表示監視整個項目
Program：
程序，這裏輸入須要調用的程序的路徑，也就是Babel的執行文件。由於以前已經把Babel安裝到了項目目錄，那麼這裏的路徑是 【項目的根目錄】+【\node_modules\.bin\babel.cmd】。好比個人項目放在D:\projects\oa，那麼這裏填寫

D:\projects\oa\node_modules\.bin\babel.cmd

Arguments：
運行參數 填寫

--source-maps --out-file $FileDir$\$FileNameWithoutExtension$.js --presets env $FilePath$

Output paths to refresh:
轉化後的文件存放路徑 填寫

$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

取消嚴格模式

默認狀況下，轉換出來的代碼使用了嚴格模式。若是你不想用，那麼則能夠進行以下操做
1.安裝一個額外取消嚴格模式的插件
npm install babel-plugin-transform-remove-strict-mode
2.在babel執行參數中增長一個參數調用插件
–plugins transform-remove-strict-mode （注意plugins前面是2個【-】，不是一個，博客把2個-合併成了一個比較長的–）