原文連接:https://blog.csdn.net/peade/article/details/76522177node
網上有不少關於如何設置babel的。我學習着設置,但總差那麼幾步,沒能知足個人需求。linux
我使用的是webStorm2017.1版本。es6
使用webStorm自帶的filewatcher中的babel自動編譯前,須要安裝一些babel庫web
npm install -g babel-cli npm
網上有些教程讓全局安裝babel,實際上新的babel已經集成在babel-cli裏面了。 另外.json
網上有部分教程是項目安裝babel-cli的。 npm install babel-cli --save-dev 項目安裝也是能夠的,不過在filewatcher的babel設置裏,要在program裏選擇項目裏的babel地址。babel
npm install --save-dev babel-preset-envwebstorm
網上不少教程要求安裝babel-preset-es2015,在實際編譯時,使用webStorm的默認設置,編譯是不成功的。 env這個包,會根據es6的運行環境去編譯js,而無序指定哪一個具體的es版本。學習
在項目根目錄下,也就是package.json同目錄下,建立.babelrc文件。【該文件非必須】.net
不少網上教程推薦裏面內容爲:{"presets":["es2015"]} 。這裏的內容,須要根據本身的須要設置。webstorm的默認設置裏,實際上是不須要網上的這個推薦內容了。
經過.babelrc,能夠實現更多功能。
file - setting - languages & frameworks - Javascript
在右側的框中,選擇ECMAScript6
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系統下,須要將相應的目錄路徑修改成 /