js 101

Javascript 101 ES5/ES6環境設定

Posted by Benjamin Lu on 2017-08-22

Javascript 101 ES5/ES6環境設定

本書透過介紹Javascript ES5語法和ES6語法的差異來快速介紹前端開發的演進

ES5

大部分主流瀏覽器完整支援的語法標準，又稱ECMAScript 5，2009年12月修訂，可以看到主流瀏覽器對ES5的支援都是十分完備的

ES6

又稱ES6 Harmony、ECMAScript 2015、ECMAScript 6，為js實作ECMA262 standard的語法之一，在2015年6月陸續提出新的語法標準，語法上的新特性可以參考更完整的開源書教學

因為ES6都還沒有完全定案，很多提案還在審查階段
根據審查進度，分為不同的stage

babel 針對 stage 有實作幾個不同的 presets，包含了

  1. preset-stage-0
  2. preset-stage-1
  3. preset-stage-2
  4. preset-stage-3

stage 數字越大的 preset 所包含的 plugins 代表即將進入 ECMA262 standard, TC39 Process，
官方預設的範例 stage 0 的 preset
使用就是因為其包含了 stage 1, 2, 3 的 presets，
而許多開發者直接用 stage 0，會把全部 stage 都載入，建議花時間了解各個 preset-stage 分別載入哪些 plugins 為佳。

補充: ES7稱ES2016，也是ECMA262 standard的一部分內容

ECMA262歷史與補充資料

測試工具

如果想要測試ES5/ES6語法的執行差異，建議先不要自己架設babel、webpack等環境，因為自己設定一個支援webpack和babel環境的步驟就相當複雜，而且現今前端開發中主流的套件(React.js, Vue.js等等)，都已經提供整合好webpack和babel的版本，因此如果只是要測試語法差異，可以透過jsbin平台

讓JS Bin支援完整ES6語法

進入首頁後按右上角Login or Register，透過Github帳號OAuth登入後
右上角選擇Account -> Preferences -> Linting -> JSHint 填入

1
2
3
{
  "esnext": true
}

回到編輯畫面後啟用Javascript區塊，並將Javascript區塊的語法改為ES6/Babel，這樣就完成了

或是直接到Babel官網上面嘗試新的語法

因為ES6語法上的教學，很多開源文件已經做得相當完整
故教學文件的重點會放在ES5/ES6 OOP FP寫法的差異上

FEATURED TAGS
js 101
FRIENDS