几天前，我们在组织的 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";

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

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

但。这还不是全部。

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