JavaScript 如何使用Polyfill

最近几年，网络上出现了许多新的技术。随着新技术的出现，旧版本的浏览器可能不会立即支持它们。全球范围内有各种不同的浏览器和浏览器版本，每个版本都略有不同的功能。虽然流行浏览器的最新版本可以执行许多旧版本无法执行的任务，但仍然需要支持旧版本。在确保应用程序在不损害新功能功能的情况下高效运行的同时，将所有最新功能整合到浏览器中可能是一项具有挑战性的任务。

幸运的是，Polyfill可以帮助开发人员。Polyfill提供了开发人员希望浏览器默认提供的函数和特性。Polyfill是由Remy Sharp创造的。基本上，他希望使用JavaScript（或Flash或其他技术）在浏览器不具备此功能的情况下复制一个API，并将其称为Polyfill。

Polyfill及其特性：

Poly表示它可以使用广泛的技术来解决，不仅仅限于使用JavaScript，而fill则是填补在浏览器中需要该技术的空白位置。Polyfill可以被看作是填补空白和裂缝的材料，以弥合任何不完美之处。
ES6版本引入了许多新特性，这些特性尚未被所有浏览器完全支持。如果我们在代码中使用ES6、ES7或ES8的特性，由于旧浏览器不支持这些新特性，它可能无法正常工作。除了语法结构和操作符外，新的语言特性还可能包括内置函数。因此，我们使用Polyfill和转译器。Polyfill是一段代码，用于为兼容性问题的旧浏览器添加功能。

在旧浏览器中，如果需要支持以下特性，需要通过明确定义函数来使用Polyfill支持：

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

如何在JavaScript中使用Polyfill？

本文将探讨如何在node.js中使用Polyfill。

步骤：

我们将使用promises。我们将使用ES6代码编写promises，然后将其转换为ES5代码，以避免旧浏览器的兼容性问题。然后，我们将使用babel polyfill文件将这段ES5代码添加到我们的node模块中的index.html文件中，以在浏览器中运行代码。

第1步：环境设置

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

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

确保您在计算机上安装了Node.js，以运行Babel Polyfill。
创建一个新的项目目录，并在终端中运行以下命令开始：npm init -y

JavaScript 如何使用Polyfill

运行以下命令安装 Babel 的 CLI、Core 和 Preset。

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

Package.json： 它看起来是这样的。

JavaScript 如何使用Polyfill

Babel-polyfill会随babel-core包一起安装。
另外，我们将添加es2015到预设的预设中，因为我们正在研究babel-polyfill如何将我们的代码转换为在旧版本浏览器上运行。

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

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

JavaScript 如何使用Polyfill

第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 promises转换为ES5代码：

npx babel <ES6 code file name> --out-file <ES5 code file name>
npx babel promises.js --out-file promises_es5.js

输出： 这将创建一个名为promise_es5.js的文件，其中包含转换后的代码。

JavaScript 如何使用Polyfill

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

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

h1>标签的标题。页面将在3秒的间隔后显示<li>标签中polyfill的特性和<h4>标签中有关Promises的描述。我们将从node_modules中添加babel-polyfill文件到index.html文件中，以便在浏览器中运行使用promises的代码。

<script type=”text/javascript” src=”node_modules/babel-polyfill/dist/polyfill.min.js”></script>  
<script type=”text/javascript” src=”/promises_es5.js”></script>

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <title>Polyfill</title> 
</head> 
<body> 
    <h1 style="text-align: center;color: green;"> 
      Welcome to GeeksforGeeks : Polyfill testing 
    </h1> 
    <h1 style="text-align: center;color: green;">  
      Polyfill-Features 
    </h1> 
    <h3>(The features will be displayed after 3 secs)</h3> 
    <ul> 
        <li id="one"> 
        </li> 
        <li id="two"> 
  
        </li> 
        <li id="three"> 
  
        </li> 
    </ul> 
    <h4>We have used promises to understand how to use polyfill</h4> 
    <h1>Promises</h1> 
    <h4 id="four"></h4> 
    
    <!-- Polyfill.min.js file from node_modules and promise_es5 -->
    <script type="text/javascript" 
            src="node_modules/babel-polyfill/dist/polyfill.min.js"> 
    </script> 
    <script type="text/javascript"
            src="/promises_es5.js"> 
    </script> 
</body> 
</html>

我们的最终项目结构： 它会像这样。

JavaScript 如何使用Polyfill