# Javascript 101 ES5/ES6環境設定

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

### ES5

大部分主流瀏覽器完整支援的語法標準，又稱ECMAScript 5，2009年12月修訂，可以看到主流瀏覽器對ES5的[支援](http://kangax.github.io/compat-table/es5/)都是十分完備的

### ES6

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

* http://es6.ruanyifeng.com/

因為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歷史與補充資料](http://yangxiaofu.com/booker/es6/dest/javascript/ECMAScript%206%E7%AE%80%E4%BB%8B-01.html)

### 測試工具

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

#### 讓JS Bin支援完整ES6語法

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

{
  "esnext": true
}

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

或是直接到[Babel官網](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&playground=false&code_lz=Q)上面嘗試新的語法

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