Polyfills 和轉譯器

JavaScript 語言持續演進。新的語言提案定期出現，它們會被分析，如果被認為有價值，就會被加入 https://tc39.github.io/ecma262/ 中的清單，然後進展到 規格。

JavaScript 引擎背後的團隊有他們自己的想法，關於要先實作什麼。他們可能會決定實作草案中的提案，並延後規格中已經有的東西，因為它們比較不有趣或比較難做。

因此，引擎僅實作標準的一部分是很常見的。

一個查看語言功能當前支援狀態的良好網頁是 https://compat-table.github.io/compat-table/es6/（它很大，我們還有很多要學習的）。

作為程式設計師，我們希望使用最新功能。越多好東西越好！

另一方面，如何讓我們的現代程式碼在尚未理解最新功能的舊引擎上執行？

有兩個工具可以做到這一點

1. 轉譯器。
2. Polyfill。

在這裡，在本章中，我們的目的是了解它們的工作原理以及它們在 Web 開發中的位置。

轉譯器

轉譯器是一種特殊的軟體，可將原始碼轉譯為另一種原始碼。它可以解析（「讀取和理解」）現代程式碼，並使用較舊的語法結構重寫它，以便它也能在過時的引擎中執行。

例如，2020 年之前的 JavaScript 沒有「空值合併運算子」??。因此，如果訪客使用過時的瀏覽器，它可能無法理解像 height = height ?? 100 這樣的程式碼。

轉譯器會分析我們的程式碼並將 height ?? 100 重寫為 (height !== undefined && height !== null) ? height : 100。

// before running the transpiler
height = height ?? 100;

// after running the transpiler
height = (height !== undefined && height !== null) ? height : 100;

現在，重寫的程式碼適用於較舊的 JavaScript 引擎。

通常，開發人員在自己的電腦上執行轉譯器，然後將轉譯後的程式碼部署到伺服器。

說到名稱，Babel 是最著名的轉譯器之一。

現代專案建置系統，例如 webpack，提供一種方法可以在每次程式碼變更時自動執行轉譯器，因此很容易整合到開發過程中。

Polyfill

新的語言功能可能不僅包括語法結構和運算子，還包括內建函式。

例如，Math.trunc(n) 是一個「切斷」數字小數部分的函式，例如 Math.trunc(1.23) 回傳 1。

在某些（非常過時的）JavaScript 引擎中，沒有 Math.trunc，因此此類程式碼將會失敗。

由於我們討論的是新函式，而非語法變更，因此這裡不需要轉譯任何內容。我們只需要宣告遺失的函式即可。

更新/新增新函式的指令碼稱為「polyfill」。它會「填補」空白並新增遺失的實作。

針對此特定案例，Math.trunc 的 polyfill 是實作它的指令碼，如下所示

if (!Math.trunc) { // if no such function
  // implement it
  Math.trunc = function(number) {
    // Math.ceil and Math.floor exist even in ancient JavaScript engines
    // they are covered later in the tutorial
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

JavaScript 是一種高度動態的語言。指令碼可以新增/修改任何函式，甚至是內建函式。

兩個有趣的 polyfill 函式庫為

• core js 支援很多功能，允許只包含必要的特點。
• polyfill.io 服務提供包含 polyfill 的指令碼，取決於特點和使用者的瀏覽器。

摘要

在本章中，我們希望激勵您學習現代甚至「尖端」語言特點，即使 JavaScript 引擎尚未提供良好的支援。

只要別忘了使用轉譯器（如果使用現代語法或運算子）和 polyfill（新增可能遺失的函式）。它們會確保程式碼運作。

例如，稍後當您熟悉 JavaScript 時，您可以設定一個基於 webpack 的程式碼建置系統，並搭配 babel-loader 外掛程式。

顯示各種特點目前支援狀態的良好資源

• https://compat-table.github.io/compat-table/es6/ – 純 JavaScript。
• https://caniuse.dev.org.tw/ – 瀏覽器相關函式。

P.S. Google Chrome 通常在語言特點方面最為最新，如果教學示範失敗，請嘗試使用看看。不過，大多數教學示範都能在任何現代瀏覽器中運作。