副標題：有什麼區別，為什麼有關係？

原文地址：medium.com/better-prog…

原文作者：medium.com/@derek_deve…

釋出時間：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。

（圖片作者：貝莉兒NG on Unsplash）

其他資源

• David Gilbertson 深入討論了填充和轉碼（編譯）。
• 官方的Babel文件對理解編譯很有用。
• Remy Sharp 在 2010 年創造了 polyfill 這個術語，他是這樣解釋的：

把瀏覽器想象成一堵有裂縫的牆。這些polyfills有助於撫平裂縫，給我們提供了一堵光滑的瀏覽器牆。

(圖片：Pierre Châtel-Innocenti on Unsplash)

---

通過www.DeepL.com/Translator（免費版）翻譯