ECMAScript 6是JavaScript語言的下一代標(biāo)準(zhǔn),已經(jīng)在2015年6月正式發(fā)布了。Mozilla公司將在這個標(biāo)準(zhǔn)的基礎(chǔ)上,推出JavaScript 2.0。
ES6的目標(biāo),是使得JavaScript語言可以用來編寫大型的復(fù)雜的應(yīng)用程序,成為企業(yè)級開發(fā)語言。
作為一只猴子,我也想嘗試一下ES6有什么新特性,于是開始了學(xué)習(xí)之路。
在webstorm寫下了這段代碼,體驗一下ES6語法的便利,但是一大堆報錯
相信每一只程序猴都不想在這樣的環(huán)境下編碼,反正本猴不想
1 語法支持設(shè)置
Preferences > Languages & Frameworks > JavaScript
這里只要配置ECMAScript版本即可
配置之后
2 自動轉(zhuǎn)碼為ES5
file watcher + babel(ES6轉(zhuǎn)碼器)
你可能希望你寫的代碼有更好的兼容性,但目前的ES6肯定不是所有瀏覽器都支持的,所以我們要用到ES6轉(zhuǎn)碼器。
Babel是一個廣泛使用的ES6轉(zhuǎn)碼器,可以將ES6代碼轉(zhuǎn)為ES5代碼,從而在瀏覽器或其他環(huán)境執(zhí)行。這意味著,你可以用ES6的方式編寫程序,又不用擔(dān)心現(xiàn)有環(huán)境是否支持。
而且你還希望每次修改代碼時能自動轉(zhuǎn)碼,所以還要用到webstorm的file watcher(當(dāng)然還有其他解決方案)
npm install -g babel
- Preferences > Tools > File watchers
- 點(diǎn)擊“+”按鈕
File Type:配置該監(jiān)聽器監(jiān)聽的文件類型,可以在Preferences > Editor > File types中配置
Scope:配置該監(jiān)聽器的監(jiān)聽范圍,可自定義新的范圍,也可以使用Preferences > Appearance & Behavior > Scopes中定義的范圍
Program:babel的安裝位置
Arguments:命令執(zhí)行參數(shù),參見Babel CLI
Working directory:babel命令執(zhí)行的位置,默認(rèn)為文件所在目錄
這樣對文件做修改會隨時生成編譯成ES5的文件以及sourceMap文件