webstorm ES6 轉 ES5

標籤：

一句話總結：用WebStorm內建的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼為ES5代碼

1.

　　建立一個Empty Project，然後在src目錄下建立了一個main.js；

　// 這一步不是必須的 只是剛上手的話 從空項目開始自己配置會少很多幹擾

2. 

　　進入設定，把JavaScript language version改成ECMAScript 6；

3. 

　　再Then..寫一段ES6代碼

‘use strict‘;// node直接運行ES6代碼時，如使用了ES6的一些關鍵字，比如let，就需要strict 模式，否則會報錯// 這是沒有strict 模式時候的錯誤提示// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict modefunction* 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);

4.

　　現在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那一項，填（其實選的是 babel.cmd）
  

  $ProjectFileDir$/node_modules/.bin/babel

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

 

• 但是還沒搞定！現在只是搞定了自動轉換的功能，系統預設把ES6 compile成了ES6..（你應該會發現compile出來的東西跟原來的一樣..Generator函數並沒有被轉換成ES5的格式）

　　  所以我們需要安裝Babel的preset以正確識別ES6代碼；

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

• 在根目錄下建立一個.babelrc檔案（就是babel在當前項目的設定檔），寫上

  {  "presets": [    "es2015"  ]}

　　

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

webstorm ES6 轉 ES5