webstorm上利用babel實現自動編譯es6文件

做者：喵皙曦溪灼其華
連接：https://www.zhihu.com/question/43414079/answer/95642131
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

題主習慣了WebStorm的話..我就假設題主會用Node.js和npm啦～
一句話總結：用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼爲ES5代碼
 

• 我是這麼配置的..就先新建一個Empty Project，而後在src目錄下新建了一個main.js；

// 這一步不是必須的 只是剛上手的話 從空項目開始本身配置會少不少干擾
 

• Then..進入設置，把JavaScript language version改爲ECMAScript 6；

 

• 再Then..寫一段ES6代碼

'use strict';
// node直接運行ES6代碼時，如使用了ES6的一些關鍵字，好比let，就須要嚴格模式，不然會報錯
// 這是沒有嚴格模式時候的錯誤提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode


function* fibs() {// Generator Function
    let a = 0;
    let b = 1;
    while (true) {
        yield a;
        // [a, b] = [b, a + b];
        b = a + b;
        a = b - a;
    }
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);

 

• 如今IDE會出現一個File watcher提示條

 

• 先別點Add watcher！咱們要先去裝babel～
  • 首先在根目錄新建一個package.json

{
  "name": "test-project",
  "version": "1.0.0"
}

 

• • 而後打開IDE的Terminal，安裝babel-cli

npm install --save-dev babel-cli

 

• Good! 如今能夠去點Add watcher啦，點完以後會彈出一個框，其中大部分設置IDE都幫你搞定了

下面第三行，Program那一項，填

$ProjectFileDir$/node_modules/.bin/babel

而後點OK，這個時候你就會發現左邊多出來一個main-compiled.js文件啦
 

• 可是還沒搞定！如今只是搞定了自動轉換的功能，系統默認把ES6 compile成了ES6..（你應該會發現compile出來的東西跟原來的同樣..Generator函數並無被轉換成ES5的格式）

因此咱們須要安裝Babel的preset以正確識別ES6代碼；
 

• • 和剛纔同樣，在npm安裝babel的ES6的preset

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

 

• • 在根目錄下新建一個.babelrc文件（就是babel在當前項目的配置文件），寫上

{
  "presets": [
    "es2015"
  ]
}

 

• OK搞定！保存再回去看一下main-compiled.js 應該就變成這個樣子啦，如今你在main.js裏直接寫ES6代碼，IDE都會自動compile成ES5的代碼在這裏啦～

 

• 注意：想直接用Node.js運行ES6代碼仍是有些問題..由於這段代碼用的ES6的解構賦值Node.js還未徹底支持，須要在運行的時候加入一些tags（以開啓Node.js的相關試驗特性），具體能夠參考Node.js官網對ES6的說明：ECMAScript 2015 (ES6)