webstorm babel 自動編譯ES6代碼 Demo

官方文檔

http://babeljs.io/docs/setup/#installation

準備工作

1. webstorm IDE
2. node環境 (不會戳這裏 http://blog.csdn.net/wx11408115/article/details/76609889)
3. npm 的一些基本操作

1. 新建一個空項目

2. 新建個main.js 作爲測試文件並寫兩句ES6代碼

報紅啦！！！
不捉急。

3. 設置ES6

選擇左上角 File ——> Setting——>Language &Frameworks ——>JavaScript——>選擇ECMA6——>Apply——>OK

再回頭看main.js文件是不是不報紅啦？
(ps:稍微改了下文字)

4. npm init

npm init

執行該命令，裏面的提示可以填，也可以一路回車鍵，直到yes

5. 安裝

npm install --save-dev babel-cli

執行完畢後，看看package.json 裏是不是多了東西？？？

6. 添加File Watchers

File ——> Setting——>Tools ——>File Watchers——>加號——>Babel 然後彈框

然後就Apply ——>OK——>OK
切記一定要點擊確定吶！ 不然白忙活了

我把裏面三句貼出來，以防有些童鞋IDE沒有自己生成，這樣可以直接拷過去

H:\blog\babelDemo\node_modules\.bin\babel.cmd //要改成你工程babel.cmd 的位置

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env

dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map

//自己對號入座哈，

7. 在工程根目錄下，新建名爲 .babelrc 的文件

打開文件，把下面的配置貼進去，保存。

{
  "presets": ["env"]
}

8. 安裝 babel-preset-env

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

瞅瞅，是不是package.json中，又多了一點東西？ 正是你剛剛安裝的

9. 安裝babel-preset-es2015

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

剛剛控制檯說，現在推薦使用 babel-preset-env

npm WARN deprecated babel-preset-es2015@6.24.1: ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.
io/env to update!

看，又增加了~~~

測試

現在我們開始測試一下，把main.js文件稍微改點東西，然後ctrl +s 保存，目錄是不是多了個dist文件夾，裏面還有編譯好的文件，是不是有點小雞凍呢？？？

激動就點個贊，沒成功就踩一腳。
demo 地址: https://github.com/WiFiUncle/blog/tree/master/babelDemo