原文鏈接：https://blog.csdn.net/peade/article/details/76522177
網上有很多關於如何設置babel的。我學習着設置，但總差那么幾步，沒能滿足我的需求。
我使用的是webStorm2017.1版本。
babel安裝准備
使用webStorm自帶的filewatcher中的babel自動編譯前，需要安裝一些babel庫
全局安裝babel-cli
npm install -g babel-cli
網上有些教程讓全局安裝babel，實際上新的babel已經集成在babel-cli里面了。 另外.
網上有部分教程是項目安裝babel-cli的。 npm install babel-cli --save-dev 項目安裝也是可以的，不過在filewatcher的babel設置里，要在program里選擇項目里的babel地址。
安裝其他babel庫
npm install --save-dev babel-preset-env
網上很多教程要求安裝babel-preset-es2015，在實際編譯時，使用webStorm的默認設置，編譯是不成功的。 env這個包，會根據es6的運行環境去編譯js，而無序指定哪個具體的es版本。
.babelrc
在項目根目錄下，也就是package.json同目錄下，創建.babelrc文件。【該文件非必須】
很多網上教程推薦里面內容為：{"presets":["es2015"]} 。這里的內容，需要根據自己的需要設置。webstorm的默認設置里，其實是不需要網上的這個推薦內容了。
通過.babelrc,可以實現更多功能。
webstorm開啟es6
file - setting - languages & frameworks - Javascript
在右側的框中，選擇ECMAScript6
File Watcher 中babel設置
webstorm 里的路徑： file - setting - tools - File Watcher,
從圖中右側的+號里打開新窗口，選中babel，在圖中間就會出現Bebel了。
雙擊上圖的Babel，會進入babel設置界面。
在這個界面里，需要設置的地方有三個，Program，Arguments, Output paths to refresh
這里的設置很重要，網上的教程，基本沒有對這三個進行詳細介紹的。
Program 如果是全局安裝babel-cli的，這里默認就好了。如果是項目安裝的，就要右邊的...到項目的node_modules文件夾中，找到.bin文件夾下面的babel文件，點ok就可以了
Arguments 默認為： $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output paths to refresh 默認為：dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
運行編譯后的結果是這樣的。
dist目錄不一定是我們想要的目錄。我們想把編譯后的文件都放在js目錄下，於是就將Arguments里的dist改成了js。 結果編譯后的文件卻像下圖這樣，不斷嵌套。
要解決這個不斷嵌套的問題，就需要把Output paths to refresh 中的dist，同樣該為js，就不會出現這種嵌套編譯了。
我的目標要編譯成這種結構的js
我的設置為： 這樣就可以讓編譯后的文件和原文件在同一個文件夾下
Arguments:
$FilePathRelativeToProjectRoot$ --out-file $FileDir$\$FileNameWithoutExtension$-compile.js --source-maps --presets env
Output paths to refresh:
$FileDir$\$FileNameWithoutExtension$-compile.js:$FileDir$\$FileNameWithoutExtension$-compile.js.map
------------------注意
在linux系統下，需要將相應的目錄路徑修改為 /