【02】webstorm配置babel轉換器+截圖（by魔芋）

【02】webstorm配置babel轉換器+截圖（by魔芋）

 

【02】魔芋的安裝過程

 

 

01，配置babel。

 

02，用webstorm。注意webstorm的版本號。

 

03， 使用webStorm自帶的file watcher中的babel自動編譯。 須要安裝一些babel庫。

 

 

04，全局安裝bable-cli。（ 實際上新的babel已經集成在babel-cli裏面了。 ）

 

 

npm install -g babel-clinpm install--save-dev  babel-preset-env

 

安裝了babel-preset-env就不用安裝 babel-preset-es2015了。

env這個包，會根據es6的運行環境去編譯js，而無序指定哪一個具體的es版本。

 

 

05，或項 目安裝babel-cli（要 在filewatcher的babel設置裏，要在program裏選擇項目裏的babel地址。 ）

 

npm install babel-cli --save-dev 

 

 

 

 

06，在項目根目錄安裝package.json.

用npm init 而後一路回車便可。

 

07， .babelrc 文件沒法在電腦文件夾直接建立，會報錯，說文件缺乏文件名，可是能夠在webstorm裏建立。

 

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

 

再也不使用：{"presets":["es2015"]} 了。

 

.babelrc文件：（官網配置）

{
    "presets": [
        "env"
    ]
}

 

 

 

---

 

 

 

08， webstorm開啓es6

file - setting - languages & frameworks - Javascript

 

09，

File Watcher 中babel設置

webstorm 裏的路徑： file - setting - tools - File Watcher,

從圖中右側的+號裏打開新窗口，選中babel，在圖中間就會出現Babel了。

 

 

 

begin：魔芋：貌似全局安裝了babel後，babel的配置就自動設置好了。

 

 

 

 

雙擊上圖的Babel，會進入babel設置界面。

 

在這個界面裏，須要設置的地方有三個，Program，Arguments,  Output paths to refresh

 

 

---

魔芋：個人配置參數爲：(成功版)（也是 webstrom最最原始的參數）

Program:

C:\Users\Miki\AppData\Roaming\npm\babel.cmd 

（ 若是是全局安裝babel-cli的，這裏默認就行了。 ）

（ 若是是項目安裝的，就要右邊的...到項目的node_modules文件夾中，找到.bin文件夾下面的babel文件，點ok就能夠了。 ）

 

 

Arguments:

- -source-maps --out-file $FileNameWithoutExtension$-compiled.js $FilePath$

(魔芋解釋：這裏的 $FileNameWithoutExtension$就是咱們的JS文件名。

好比a.js 就變爲a-compiled.js

 

$FilePah$ 就是輸出到同目錄下。

在文件夾的順序以下圖：

 

在webstorm中的效果如：

 

 

)

 

Working directory:

$FileDir$

 

Output paths to refresh:

$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map

 

 

---

 

實際效果如圖：

a.js 

let [a,b,c]=[1,2,3];

let [e]=[1,2,3];

 

a-compiled.js

"use strict";

var a = 1,
    b = 2,
    c = 3;
var _ref = [1, 2, 3],
    e = _ref[0];

//# sourceMappingURL=a-compiled.js.map

 

 

 

 

 

 

 

 

 

**