Polyfills——填充物还是缝隙？ （第 1 部分）

几天前，我们在组织的 Teams 聊天中收到一条优先消息，内容如下：发现安全漏洞 - 检测到 Polyfill JavaScript - 高。
举个例子，我在一家大型银行公司工作，你必须知道，银行和安全漏洞就像主要的敌人。因此，我们开始深入研究这个问题，并在几个小时内解决了这个问题，我将在下面讨论。但好的（或者最坏的？）部分是当我最初用谷歌搜索这个问题时，弹出的搜索结果让我在一天剩下的时间里都着迷！

让我们强调一下现代浏览器和旧版浏览器之间的差异。以下是最新 Chrome 版本与 Internet Explorer (IE) 9 的比较。现代浏览器支持大量 ES6 功能，同时，许多公司仍在使用的 IE9 和 IE11 几乎不支持任何 ES6 功能。
这里有一个转译的概念，在JavaScript的上下文中，指的是将以现代JavaScript（ES6/ES2015及更高版本）编写的源代码转换为旧版本（如ES5） ，较旧的浏览器广泛支持。一个非常流行的转译器是 Babel，它提供了一系列功能，例如语法转换、代码捆绑（以及 Webpack）和对 JSX 的支持（献给我们亲爱的朋友，React！）。

现在，在有大量现代语法的地方，转译器的使用非常普遍，并且必须确保不同环境之间的兼容性。请注意，将整个代码库转换为不同的版本需要大量时间，并且还需要为 Babel 等设置构建过程和附加配置。不言而喻的是，除了转换语法功能之外，还涵盖了在旧浏览器中扩展相同功能复制的 API 功能。

来到 Babel 的参考，它构成了很多包，提供了不同类型功能的插件，例如将 ES6 类、箭头函数等转换为等效的 JS 代码。其中，它还提供了自己的“polyfill”包。

Polyfills 是一些代码片段，使旧浏览器能够提供相同/几乎相同的 JS 功能，这些功能在较新的浏览器版本中显示，而它们本身并不提供这些功能。 这是一个快速视频示例和非常简单的实现。

现在有人可能会想，那么转译器和 Polyfill 之间有什么区别呢？嗯，polyfills 专注于模拟缺失的特定 API，而不是将整个代码库更改为由转译器完成的旧浏览器友好版本。这允许更精细的方法，当然，也使其更加高效和性能。

这应该给我们足够的背景知识来说明为什么我对 Polyfills 着迷了一天，直到我写这篇文章的那一刻。

现在，Babel 有一个名为 babel/polyfill 的包，它由 2 个库组成：core-js 和 regenerator-runtime。最初，导入此包将使所有的 polyfill 生效。

import '@babel/polyfill';

但是引入所有内容（无论您的项目是否会使用它们）、增加包大小以及全局注入 polyfill 可能会导致对象冲突。
这导致弃用该包，Babel 建议直接使用 core-js 库
第1步：修改babel配置

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

第 2 步：手动导入您要在项目中使用的 Polyfill

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

因此，节省内存并减少不必要的代码。

现在，这是一个部分的结束，本身并不那么重要，但对于项目来说绝对重要，了解依赖项的最新变化，为客户提供更好的体验。

但是。这还不是全部。

我们即将讨论最近发生的一次重大攻击，该攻击震动了整个互联网并让他们搜索了他们的代码库。
而且，它包括我们在这里讨论的内容。那就敬请期待第二部吧！

以上是Polyfills——填充物还是缝隙？ （第 1 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！