如何在 JavaScript 中使用 polyfill？

近年来，网络出现了广泛的新技术。随着新技术的出现，旧浏览器可能不会立即支持它们。全球范围内有各种各样的浏览器和浏览器版本，每个版本的功能都略有不同。虽然最新版本的流行浏览器可以完成许多旧版本无法完成的任务，但仍可能需要支持旧版本。将所有最新功能集成到浏览器中可能具有挑战性，既要确保我们的应用程序高效运行，又不影响新应用程序的功能。

幸运的是，Polyfill 覆盖了开发人员。 polyfill 提供了开发人员期望浏览器默认提供的功能和特性。 Polyfill 是由 Remy Sharp 创造的。基本上，他想要一个术语来描述使用 JavaScript（或 Flash 或其他）复制 API，如果浏览器本身没有它的话。

Polyfill及其特点：

• Poly 意味着它可以使用广泛的技术来解决，它不仅限于使用 JavaScript 完成，并且填充将填补浏览器中需要该技术的空白。 Polyfill 可以被视为一种填充空隙和裂缝以消除任何缺陷的材料。
• ES6 版本引入了许多尚未被所有浏览器完全支持的新特性。如果我们在代码中使用 ES6 或 ES7 或 ES8 功能，由于缺乏对新功能的支持，它可能无法在某些较旧的浏览器中运行。除了语法结构和运算符之外，新的语言特性还可能包括内置函数。因此，我们使用 polyfill 和转译器。 polyfill 是一段代码，用于为存在不兼容问题的旧浏览器添加功能。

在旧版浏览器中，以下功能需要通过显式定义函数来支持 polyfill：

Promises、Array.from、Array.includes、Array.of、Map、Set、Symbol、object.values 等

如何在 JavaScript 中使用 polyfill？

我们将在本文中探讨 polyfill 如何在 node.js 中工作。

方法：我们将使用 Promise。我们将在 ES6 代码中编写 Promise，然后将其转换为 ES5 代码，以避免旧浏览器的不兼容问题。然后，我们将把这个 ES5 代码 babel polyfill 文件从我们的节点模块添加到我们的 index.html 文件中，以在我们的浏览器中运行代码。

第 1 步：环境设置

Babel 转译器是一个免费的开源工具，可将 ECMAScript 2015 (ES6) 代码转换为可在新旧浏览器上运行的向后兼容的 JavaScript 版本。

我们将设置我们的项目并查看 Babel polyfill。

• 确保你的机器上安装了 Node.js 来运行 Babel polyfill。
• 创建一个新的项目目录并在终端中运行以下命令以开始：npm init -y

初始化 npm

• 运行以下命令安装 babel cli、core 和 preset。

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Package.json：它看起来像这样。

包.json 文件

• Babel-polyfill 与 babel-core 包一起安装。
• 此外，我们将 es2015 添加到预定义的预设中，因为我们正在探索 babel-polyfill 如何将我们的代码转换为在旧版浏览器上工作。

现在创建一个文件.babelrc并添加以下预设：

{ "presets":["@babel/env"] }

.babelrc 文件

第 2 步：创建一个 promises.js 文件并编写以下代码。这会显示 polyfill 和 promises 的功能，并且控制台会在 3 秒的间隔后记录问候消息。

Javascript

// ES6 promises
  
const greet = new Promise((resolve, reject) => {
    setTimeout(function () {
        resolve("Welcome to GeeksforGeeks!");
        document.getElementById(
            "one"
        ).innerHTML = `Poly means that it could be 
        solved using a wide range of techniques it 
        wasn't limited to just being done using 
        JavaScript, and fill would fill the gap in 
        the browser where the technology was needed.`;
        document.getElementById(
            "two"
        ).innerHTML = `A polyfill is a piece of code 
        that adds functionality to older browsers 
        that have incompatibility issues.`;
        document.getElementById(
            "three"
        ).innerHTML = `In older browsers, Promises, 
        Array.from, Array.includes, Array.of, Map, 
        Set, Symbol, object.values, etc require 
        polyfill support by explicitly defining 
        the functions`;
        document.getElementById("four").innerHTML =
            "Promises represent uncompleted operations.";
    }, 3000);
});
  
greet.then((msg) => {
    console.log(msg);
});

第 3 步：通过在终端中运行以下命令，将 ES6 Promise 转换为 ES5 代码：

npx babel  --out-file 
npx babel promises.js --out-file promises_es5.js

输出：这将创建一个包含转换代码的文件 promise_es5.js。

es6代码转换成es5代码

第 4 步：我们需要在最终编译的 ES5 代码中包含 polyfill。

创建一个 index.html 文件并添加一个带有

标记的标题。

标签中 polyfill 的特性和

标签中关于 Promises 的描述会在 3 秒后显示。我们将 babel-polyfill 文件从节点模块添加到 index.html 文件中，我们希望在该文件中使用 Promise 在浏览器中运行代码。

将以下代码添加到 index.html 文件中。

HTML

    
    
    
    Polyfill


    
      Welcome to GeeksforGeeks : Polyfill testing
    
     
      Polyfill-Features
    
    (The features will be displayed after 3 secs)
    
        
        
        
  
        
        
  
        
    
    We have used promises to understand how to use polyfill
    Promises
    
    
    
    
    
    
    

我们最终的项目结构：它看起来像这样。

项目结构

运行我们的应用程序的步骤：要启动服务器，请右键单击您的 index.html 文件并选择一个打开的实时服务器。

输出：使用 polyfill，我们可以使用 Promise。每隔 3 秒就会显示 polyfill 的特性以及对 Promise 的简要描述。

现在刷新浏览器。使用检查选项或按 ctrl + shift + i 打开控制台窗口。在控制台窗口中每隔 3 秒就会出现一条问候消息。

输出：在 polyfill 的帮助下使用 es6 Promise

参考： https://developer.mozilla.org/en-US/docs/Glossary/Polyfill