1 回答

TA貢獻1966條經(jīng)驗 獲得超4個贊
習慣了WebStorm的話..我就假設題主會用Node.js和npm啦~
一句話總結:用WebStorm自帶的File Watcher功能+Babel實現(xiàn)自動轉換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);
現(xiàn)在IDE會出現(xiàn)一個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! 現(xiàn)在可以去點Add watcher啦,點完之后會彈出一個框,其中大部分設置IDE都幫你搞定了
下面第三行,Program那一項,填
$ProjectFileDir$/node_modules/.bin/babel
然后點OK,這個時候你就會發(fā)現(xiàn)左邊多出來一個main-compiled.js文件啦
但是還沒搞定!現(xiàn)在只是搞定了自動轉換的功能,系統(tǒng)默認把ES6 compile成了ES6..(你應該會發(fā)現(xiàn)compile出來的東西跟原來的一樣..Generator函數(shù)并沒有被轉換成ES5的格式)
所以我們需要安裝Babel的preset以正確識別ES6代碼;
和剛才一樣,在npm安裝babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目錄下新建一個.babelrc文件(就是babel在當前項目的配置文件),寫上
{
"presets": [
"es2015"
]
}
OK搞定!保存再回去看一下main-compiled.js 應該就變成這個樣子啦,現(xiàn)在你在main.js里直接寫ES6代碼,IDE都會自動compile成ES5的代碼在這里啦~
注意:想直接用Node.js運行ES6代碼還是有些問題..因為這段代碼用的ES6的解構賦值Node.js還未完全支持,需要在運行的時候加入一些tags(以開啟Node.js的相關試驗特性),具體可以參考Node.js官網(wǎng)對ES6的說明:ECMAScript 2015 (ES6)。
- 1 回答
- 0 關注
- 1017 瀏覽
添加回答
舉報