webstorm配置babel自動轉譯es6的方法

1.npm安裝babel

npm install -g babel-cli

2.npm安裝Babel的preset

npm install --save-dev babel-preset-es2015

3.工程路徑新建.babelrc文件（不要落了前面的“.”），內容如下

{
  "presets": [
    "es2015"
  ]
}

.4 打開Settings->Tools->File Watcher->Babel,

5.

5 雙擊打開Babel，進行配置
重點是Watcher Seetings參數：

• Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

 

.6 這樣就完成了自動轉換js的配置，新建index.js文件測試，如下圖,自動生成index-compiled.js文件，這個文件就是轉譯后的文件：