webstorm設置babel,使用es6

原文連接:https://blog.csdn.net/peade/article/details/76522177node

 

網上有不少關於如何設置babel的。我學習着設置,但總差那麼幾步,沒能知足個人需求。linux

我使用的是webStorm2017.1版本。es6

babel安裝準備

使用webStorm自帶的filewatcher中的babel自動編譯前,須要安裝一些babel庫web

全局安裝babel-cli

npm install -g babel-cli             npm

網上有些教程讓全局安裝babel,實際上新的babel已經集成在babel-cli裏面了。  另外.json

網上有部分教程是項目安裝babel-cli的。 npm install babel-cli --save-dev    項目安裝也是能夠的,不過在filewatcher的babel設置裏,要在program裏選擇項目裏的babel地址。babel

安裝其餘babel庫

npm install --save-dev  babel-preset-envwebstorm

網上不少教程要求安裝babel-preset-es2015,在實際編譯時,使用webStorm的默認設置,編譯是不成功的。 env這個包,會根據es6的運行環境去編譯js,而無序指定哪一個具體的es版本。學習

.babelrc

在項目根目錄下,也就是package.json同目錄下,建立.babelrc文件。【該文件非必須】.net

不少網上教程推薦裏面內容爲:{"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系統下,須要將相應的目錄路徑修改成 / 

相關文章
相關標籤/搜索