預防針 💉

小弟我也只是略懂略懂

名詞解釋

ECMAScript

1995 => LiveScript => JavaScript 1997 => 成為 ECMA-262 (ECMAScript)

ECMAScript 是一套標準
JavaScript 是一套實作 (Microsoft JScript 也是一套實作)

Ecma International

前身為歐洲計算機製造商協會（European Computer Manufacturers Association），現為國際性組織
制定計算機相關標準 (https://www.ecma-international.org/publications/standards/Standard.htm)
- ECMA-334 => C# Language Specification
- ECMA-372 => C++/CLI Language Specification
- ECMA-384 => DVD-RW
- ECMA-404 => JSON
- ECMA-262 => ECMAScript (https://tc39.github.io/ecma262/)
- ECMA-262 Edition 3 => ECMAScript 3 => ES3
- ECMA-262 Edition 5 => ECMAScript 5 => ES5
- ECMA-262 Edition 6 => ECMAScript 6 => ES6

TC39

TC (Technical Committees) => 在 Ecma International 裡頭負責制定規格的委員會

TC39 => 負責 ECMAScript 的委員會 (https://www.ecma-international.org/memento/TC39.htm)

Stage 0, 1, 2, 3, 4

TC39 Process (https://tc39.github.io/process-document/) Babel Stage-X (https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-)

Stage 0 => Strawman => 任何人都可以提案，可能只是一個想法而已 Stage 1 => Proposal => 初步描述語法、語義、演算法、使用情境及範例 Stage 2 => Draft => 規格草稿，使用正式的文件描述語法及語義 Stage 3 => Candidate => 完成規格，必須針對使用者的回饋做修正 Stage 4 => Finished => 即將進入 ECMAScript 標準

簡單來說，Stage 3 以前都還不是標準，所以使用了 Stage 3 以前的任何標準，都要有未來會改變的心理準備。

Examples: https://github.com/tc39/proposals

Stage-3 範例:

JavaScript Engine

JavaScript => JavaScript Engine

Google Chrome => V8
Mozilla Firefox => Gecko
Microsoft Edge => Chakra
Internet Explorer => Trident

ECMAScript 2015+ 相容性

Checkout ES6 Support on Browsers (https://kangax.github.io/compat-table/es6/)
Checkout ES6 Support on Node.js (http://node.green/)

開發者 <=> 瀏覽器存在支援度參差不齊的問題

依照木桶理論：你必須支援到最低標準，才能涵蓋到所有瀏覽器

為了達到最低標準 => 你必須花額外的時間 => 同時必須犧牲一些新版優點
又因為你需要寫舊版語法 => 所以讓你的程式難以維護 => 舊有問題依然在延續

Babel

有沒有辦法使用新的語法，然後又能讓舊版瀏覽器支援的方法？

ECMAScript 6,7,8,9 => 翻譯 => ECMAScript 5

讓開發者可以直接使用新的語法，與所有瀏覽器溝通

                       => 瀏覽器 A
開發人員  => Babel 翻譯  => 瀏覽器 B
                       => 瀏覽器 C

如果 Babel 學會額外的新語法 (Plugin)，一樣能夠翻譯給瀏覽器看

                                    => 瀏覽器 A
開發人員  => Babel 翻譯 + 未定案的語法  => 瀏覽器 B
                                    => 瀏覽器 C

為什麼 Babel 的存在是重要的:

開發者  <===>  Babel  <===>  TC39委員會

What Babel(Compiler) does

主要分為三階段

  解析          修改           輸出
Parsing => Transforming => Generation

           ^ Plug-ins ^

所以說，其實會變成

JavaScript  =>  AST  =>  亂搞  =>  AST  =>  JavaScript

AST = Abstract Syntax Tree = 抽象語法樹

Demo: https://astexplorer.net/

也就是

ES6 => 翻譯 => ES5

=======> 所以說 Plug-in 才是本體 <=========

類似的概念有 Gulp, Webpack, PostCSS

Plug-in (Syntax transformer)


A Plug-in = A new syntax

 一個外掛  = 一個新語法

es2015-arrow-functions
es2015-classes

Ref: https://babeljs.io/docs/plugins/#transform-plugins

Presets

ES2015, 2016, 2017 and ENV

ES2015

check-es2015-constants
es2015-arrow-functions
es2015-block-scoped-functions
es2015-block-scoping
es2015-classes
es2015-computed-properties
es2015-destructuring
es2015-duplicate-keys
es2015-for-of
es2015-function-name
es2015-literals
es2015-object-super
es2015-parameters
es2015-shorthand-properties
es2015-spread
es2015-sticky-regex
es2015-template-literals
es2015-typeof-symbol
es2015-unicode-regex

ES2016

exponentiation-operator

ES2017

async-to-generator

其實 ES2015 就夠用了

babel-preset-react => React, JSX babel-preset-latest => 2015 + 2016 + 2017

babel-preset-env

給定執行環境參數，依照環境編譯。(推薦作法)

// browserslist string
"browsers": [
  "last 2 versions",
  "ie 6-8"
]

browserlist string (https://github.com/ai/browserslist)
查詢 browserslist string 對應的瀏覽器清單 (http://browserl.ist/?q=last+2+versions)

Babel 使用情境

Fast-prototyping

Browser-side: babel-standalone
Node-side: babel-node

開發/正式環境

CLI => babel-cli => 直接編譯檔案
Browserify => babelify
Gulp => gulp-babel
Webpack => babel-loader

測試框架

Jest => babel-jest
Mocha => babel-register
Karma => karma-babel-preprocessor
AVA => (built-in)

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

Plugin 就是一個一個 Syntax
Preset 就是一綑一綑 Plugins

Ordering matters

Plugins => Presets
Plugins: First => Last
Presets: Last => First (原因是大家都把常用的放前面，為了最大相容性所以反過來)

Takeaway

Babel 只是執行器，Plugin 才是本體
一個 Plugin 就是一個 Syntax
一個 Preset 就是一綑 Plugins
使用正確的 Preset，推薦用 preset-env

References

https://naturefeng.github.io/2016/09/22/%E5%A6%82%E4%BD%95%E6%9B%B4%E5%A5%BD%E7%9A%84%E4%BA%86%E8%A7%A3ECMAScript/

課外讀物

ISO

國際標準化組織（International Organization for Standardization）
ISO 216 -- A3, A4 紙張尺寸
ISO 2108 -- ISBN 國際標準書號
ISO 3166 -- 國家代碼 (https://www.iso.org/obp/ui/#search/code/)
- TW
- TWN
ISO 8601 -- 時間日期格式，
- 2013-02-04T22:44:30.652Z
- 2017-02-04T20:44:30.652+08:00
- moment#toISOString (https://momentjs.com/docs/#/displaying/as-iso-string/)

GMT 格林威治標準時間 (Greenwich Mean Time) => 以天文台時間為基準，但因地球自轉不規則，已經不參考 UTC 世界協調時間 (Universal Time Coordinated) => 以原子鐘為基準，GMT 的替代品

ajhsu / blog

Understanding ECMAScript, TC39, and Babel #39