幾天前，我們在組織的 Teams 聊天中收到一條優先訊息，內容如下：發現安全漏洞 - 偵測到 Polyfill JavaScript - HIGH。
舉個例子，我在一家大型銀行公司工作，你必須知道，銀行和安全漏洞就像主要的敵人。因此，我們開始深入研究這個問題，並在幾個小時內解決了這個問題，我將在下面討論。但好的（或最壞的？）部分是當我最初用谷歌搜尋這個問題時，彈出的搜尋結果讓我在一天剩下的時間裡都著迷！

讓我們強調一下現代瀏覽器和傳統瀏覽器之間的差異。以下是最新 Chrome 版本與 Internet Explorer (IE) 9 的比較。現代瀏覽器支援大量 ES6 功能，同時，許多公司仍在使用的 IE9 和 IE11 幾乎不支援任何 ES6 功能。
這裡來幫助解釋transpiling 的概念，在JavaScript 中，它指的是將以現代JavaScript（ES6/ES2015 及更高版本）編寫的源代碼轉換為舊版本（如ES5） ，較舊的瀏覽器廣泛支援。一個非常流行的轉譯器是 Babel，它提供了一系列功能，例如語法轉換、代碼捆綁（以及 Webpack）和對 JSX 的支持（為我們親愛的朋友 React！）。

現在，在有大量現代語法的地方，轉譯器的使用非常普遍，並且必須確保不同環境之間的兼容性。請注意，將整個程式碼庫轉換為不同的版本需要大量時間，並且還需要為 Babel 等設定建置過程和附加配置。不言而喻的是，除了轉換語法功能之外，還涵蓋了在舊瀏覽器中擴展相同功能複製的 API 功能。

參考Babel，它構成了許多包，為不同類型的功能提供插件，例如將ES6類、箭頭函數等轉換為等效的JS程式碼。其中，它還提供了自己的“polyfill”包。

Polyfills 是一些程式碼片段，使舊瀏覽器能夠提供相同/幾乎相同的JS 功能，這些功能它們本身不提供，但在較新的瀏覽器版本中顯示。 這是一個快速視訊範例和非常簡單的實現。

現在有人可能會想，那麼轉譯器和 Polyfill 之間有什麼差別呢？嗯，polyfill 專注於模擬缺少的特定 API，而不是將整個程式碼庫更改為由轉譯器完成的舊瀏覽器友善版本。這允許採用更細粒度的方法，當然，也使其更加高效和性能。

這應該給我們足夠的背景知識來說明為什麼我在寫這篇文章的那一刻之前就著迷了一天。

現在，Babel 有一個名為 babel/polyfill 的套件，它由 2 個函式庫組成：core-js 和 regenerator-runtime。最初，導入這個套件將使所有的polyfills發揮作用。

import '@babel/polyfill';

但是引入所有內容（無論您的專案是否會使用它們）、增加套件大小以及全域注入填充可能會導致物件衝突。
這導致棄用該套件，Babel 建議直接使用 core-js 程式庫
第一步：修改babel設定

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

第 2 步：手動匯入您要在專案中使用的 Polyfills

import "core-js/es/array/includes";
import "core-js/es/promise";

因此，節省記憶體並減少不必要的程式碼。

現在，這是一個部分的結束，本身並不那麼重要，但對於專案來說絕對重要，了解依賴項的最新變化，為客戶提供更好的體驗。

但。這還不是全部。

我們即將討論最近發生的一次重大攻擊，該攻擊震動了整個互聯網並讓他們搜尋程式碼庫。
而且，它包括我們在這裡討論的內容。敬請期待第二部！