副標題：有什麼區別，為什麼有關係？
釋出時間：2019年9月8日 - 4分鐘閱讀
照片：Scott Webb on Unsplash
"Babel的目的是把你的程式碼，使用瀏覽器可能還不支援的新功能，並把它轉化為任何你關心的瀏覽器都能理解的程式碼。"Tyler McGinnis在 "編譯與填充"中說。
什麼是編譯 JavaScript？
Babel是用來編譯您的程式碼，使其與舊版本的JavaScript相容（從而在舊版本的瀏覽器中工作）。
編譯意味著編譯器（Babel）會執行語法轉換，但不會新增任何新的JavaScript基元。
當您編譯您的程式碼時，您就是在轉換它。
什麼是 JavaScript 填充？
當您新增填充時，您是在您的JavaScript程式碼中新增了以前不存在的全新功能。
填充對於那些已經新增到JavaScript中的新功能是必要的，這些新功能在普通的JavaScript程式碼中是無法複製的。
Polyfills對於已經新增到全域性JavaScript名稱空間的新屬性是必要的，因為編譯器不會解釋這些屬性。
什麼時候使用哪個？
歸根結底是語法與屬性的問題。例如，箭頭函式是語法編譯的，但Array.from是多義詞填充的。
通常情況下，您需要同時使用填充和編譯來使您的程式碼向後相容舊的瀏覽器。
當支援現代瀏覽器時，這兩種方法對於ES6功能來說都不是必需的，但是，一旦下一個偉大的JavaScript功能釋出，知道如何使用它是一種很好的做法；編譯和/或多邊填充該新功能。
連詞記憶法
"編譯你乾淨的程式碼，但要填充你漂亮的屬性。" - Dr. Derek Austin ?
(照片由Samuel Zeller在Unsplash上拍攝)
例子：填充式或編譯式
箭頭函式
Babel可以通過函式關鍵字將箭頭函式轉化為常規函式，這意味著箭頭函式可以被編譯。
類
類，如箭頭函式，可以轉化為常規函式（通過使用原型），所以類也可以被編譯。
Promises
Babel將無法將承諾轉化為舊瀏覽器能夠理解的原生JavaScript語法。
更重要的是，編譯不會向全域性名稱空間新增像 Promise 這樣的新屬性。這意味著Promises需要被填充。
析構
因為Babel可以使用點(.)符號將每一個結構化物件轉化為正常變數，所以會進行反構造編譯。
Includes
Includes可以被轉換為使用indexof，但編譯時不會新增任何新的關鍵字、屬性或基元，所以Includes需要被填充。
（Photo by Silvio Kundt on Unsplash）
大名單：填充式或編譯式
這個列表只包括ES6的功能，不包括較新的ECMAScript功能，如flatMap，這些功能也需要編譯或填充。
可以被編譯
- 箭頭函式
- 非同步函式
- 塊內函式
- 類
- 類屬性
- 計算屬性
- 常量
- 修飾器
- 預設引數
- 析構
- 模組
- 物件聚合/展開
- 屬性訪問方法
需要進行填充
- ArrayBuffer
- Array.from
- Array.of
- Array#find
- Array#findIndex
- Fuction#name
- Map
- Number.isNan
- Object.assign
- Object.entries
- Object.values
- Promise
- Set
- String#includes
- Symbol
- WeakMap
- WeakSet
資料來源：Tyler McGinnis在他的線上課程 "現代Javascript "中，特別是在3:54的這個講座（可在他的部落格上免費獲得）。神奇的Tyler McGinnis在他的線上課程Modern Javascript中，特別是3:54的這個講座（可在他的部落格上免費獲得）。
（照片由Samuel Zeller在Unsplash上拍攝）
太多東西記不住？
如果某件事情需要在JavaScript中加入新的屬性或基元，你就會知道它需要進行填充。
但如果改變的是簡單的語法糖（如箭頭函式），可以使用像Babel這樣的工具進行編譯。
當有疑問時，你總是可以簡單地在谷歌上搜尋你想做的事情以及關鍵字polyfill，例如arrow functions polyfill或array.from polyfill。
其他資源
- David Gilbertson 深入討論了填充和轉碼（編譯）。
- 官方的Babel文件對理解編譯很有用。
- Remy Sharp 在 2010 年創造了 polyfill 這個術語，他是這樣解釋的：
把瀏覽器想象成一堵有裂縫的牆。這些polyfills有助於撫平裂縫，給我們提供了一堵光滑的瀏覽器牆。
(圖片：Pierre Châtel-Innocenti on Unsplash)
通過www.DeepL.com/Translator（免費版）翻譯