【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-cli npm install--save-dev babel-preset-env
安裝了babel-preset-env就不用安裝babel-preset-es2015了。
env這個包，會根據es6的運行環境去編譯js，而無序指定哪一個具體的es版本。html
05，或項目安裝babel-cli（要在filewatcher的babel設置裏，要在program裏選擇項目裏的babel地址。）
npm install babel-cli --save-dev
06，在項目根目錄安裝package.json.
用npm init 而後一路回車便可。
07，.babelrc 文件沒法在電腦文件夾直接建立，會報錯，說文件缺乏文件名，可是能夠在webstorm裏建立。
在項目根目錄下，也就是package.json同目錄下，建立.babelrc文件。【該文件非必須】node
再也不使用：{"presets":["es2015"]} 了。git
.babelrc文件：（官網配置）
{
"presets": [ "env" ] }
08，webstorm開啓es6
file - setting - languages & frameworks - Javascriptes6
09，
File Watcher 中babel設置
webstorm 裏的路徑： file - setting - tools - File Watcher,github
從圖中右側的+號裏打開新窗口，選中babel，在圖中間就會出現Babel了。web
begin：魔芋：貌似全局安裝了babel後，babel的配置就自動設置好了。
雙擊上圖的Babel，會進入babel設置界面。sql
在這個界面裏，須要設置的地方有三個，Program，Arguments, Output paths to refreshnpm
魔芋：個人配置參數爲：(成功版)（也是webstrom最最原始的參數）
Program:
C:\Users\Miki\AppData\Roaming\npm\babel.cmd
（若是是全局安裝babel-cli的，這裏默認就行了。）
（若是是項目安裝的，就要右邊的...到項目的node_modules文件夾中，找到.bin文件夾下面的babel文件，點ok就能夠了。）
Arguments:
--source-maps --out-file
FileNameWithoutExtensionFileNameWithoutExtension-compiled.js FilePathFilePath
(魔芋解釋：這裏的
FileNameWithoutExtensionFileNameWithoutExtension就是咱們的JS文件名。
好比a.js 就變爲a-compiled.js
FilePahFilePah 就是輸出到同目錄下。
在文件夾的順序以下圖：
在webstorm中的效果如：
)