跳到主要內容

@babel/polyfill

危險

🚨 從 Babel 7.4.0 開始，此套件已棄用，建議直接包含 core-js/stable（用於補充 ECMAScript 功能）

JavaScript
import "core-js/stable";

如果您要將產生器或非同步函數編譯成 ES5，且您使用的 @babel/core 或 @babel/plugin-transform-regenerator 版本低於 7.18.0，則您還必須載入 regenerator runtime 套件。使用 @babel/preset-env 的 useBuiltIns: "usage" 選項或 @babel/plugin-transform-runtime 時，會自動載入該套件。

Babel 包含一個 polyfill，其中包含自訂的 regenerator runtime 和 core-js。

這將模擬一個完整的 ES2015+ 環境（沒有 < 第 4 階段提案），並預計用於應用程式，而非函式庫/工具。（使用 babel-node 時會自動載入此 polyfill）。

這表示您可以使用新的內建函式，例如 Promise 或 WeakMap，靜態方法，例如 Array.from 或 Object.assign，實例方法，例如 Array.prototype.includes，以及產生器函數（前提是您使用 regenerator 外掛程式）。為了執行此操作，polyfill 會新增至全域範圍以及原生原型，例如 String。

安裝​

npm install --save @babel/polyfill
資訊

因為這是多重填充（會在您的原始碼之前執行），所以我們需要它成為一個 依賴項，而不是一個 開發依賴項

大小​

多重填充提供作為便利，但您應該使用 @babel/preset-env 和 useBuiltIns 選項 來使用它，這樣就不會包含始終不需要的整個多重填充。否則，我們建議您手動匯入個別的多重填充。

TC39 提案​

如果您需要使用不是第 4 階段的提案，@babel/polyfill 就不會自動為您匯入這些提案。您必須從另一個多重填充（例如 core-js）個別匯入這些提案。我們可能會努力將此作為個別檔案包含在 @babel/polyfill 中。

在 Node / Browserify / Webpack 中使用​

若要包含多重填充，您需要在應用程式的進入點最上方要求它。

請務必在所有其他程式碼/require 陳述之前呼叫它！

JavaScript
require("@babel/polyfill");

如果您在應用程式的進入點使用 ES6 的 import 語法，您應該在進入點頂端匯入多重載入，以確保多重載入會先載入

JavaScript
import "@babel/polyfill";

使用 webpack，有多種方式可以包含多重載入

  • 與 @babel/preset-env 一起使用時，

    • 如果在 .babelrc 中指定 useBuiltIns: 'usage'，則不要在 webpack.config.js 進入陣列或來源中包含 @babel/polyfill。請注意，仍然需要安裝 @babel/polyfill。

    • 如果在 .babelrc 中指定 useBuiltIns: 'entry'，則透過 require 或 import 在進入點頂端包含 @babel/polyfill 至您的應用程式，如上所述。

    • 如果未指定 useBuiltIns 鍵，或在您的 .babelrc 中明確設定為 useBuiltIns: false，請將 @babel/polyfill 直接新增至 webpack.config.js 中的進入陣列。

webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • 如果未使用 @babel/preset-env，則將 @babel/polyfill 新增至 webpack 進入陣列，如上所述。它仍然可以透過 import 或 require 在進入點頂端新增至應用程式，但不建議這麼做。
注意

我們不建議您直接匯入整個多重載入：請嘗試 useBuiltIns 選項，或僅手動匯入您需要的多重載入（從此套件或其他地方）。

在瀏覽器中使用​

可從 @babel/polyfill npm 發行版的 dist/polyfill.js 檔案取得。這需要在所有已編譯的 Babel 程式碼之前包含。你可以將它加到已編譯程式碼前面，或是在它前面包含在 <script> 中。

注意：不要透過 browserify 等方式require 它，請使用 @babel/polyfill。

詳細資料​

提示

如果你正在尋找不會修改全域變數，可用於工具/函式庫的東西，請查看 transform-runtime 外掛程式。這表示你將無法使用上述的實例方法，例如 Array.prototype.includes。

注意：根據你實際使用的 ES2015 方法，你可能不需要使用 @babel/polyfill 或執行時期外掛程式。你可能只想 載入你正在使用的特定 polyfill（例如 Object.assign），或僅記錄載入函式庫的環境應包含特定 polyfill。