Babel 中的 Polyfill 实现原理以及实际应用场景
什么是 Polyfill？
Polyfill 是一个术语，指的是用来在旧版浏览器上模拟新的 API 的代码。在现代前端开发中，由于新的 API 不断涌现，浏览器的兼容性成为了一个不可避免的问题。
当我们在使用一些新的语法或 API 时，如果运行时环境没有支持这些新特性，那么代码将不会起作用，为了解决这个问题，可以使用 Polyfill 来实现这些新的特性，以便代码可以在旧版的浏览器上正常运行。
Polyfill 并不是什么新技术，我们可以使用自己的手动实现来填补功能差异。然而，这通常是非常冗长的，因为它需要深入了解它所需的新特性的内部工作原理并编写复杂的代码。
幸运的是，像 Babel 这样流行的 JavaScript 编译器已经封装了这个问题的解决方案。现在，我们不仅可以使用简单的工具生成一个自定义 Polyfill，还可以使用 Babel 提供的 Polyfill，这样可以在不编写多余代码，不了解新语法和新 API 的内部工作原理的情况下使其可用。
Babel 中的 Polyfill 实现原理
Babel 的 Polyfill 实现基于三个要素：core-js、regenerator-runtime 和 @babel/polyfill。
core-js 是一个模块化的标准库，提供了各种 JS 标准 API 的 Polyfill。这包括 ECMAScript 标准、Web 标准和 node.js 标准等。
regenerator-runtime 是一种实现 ECMAScript 6 中生成器(generator)和异步函数(async/await)的工具。在 Babel 中，regenerator-runtime 被用于打补丁，使函数生成器可以在早期版本的 JavaScript 引擎上运行。
@babel/polyfill 是一个单文件的包，该文件将指定使用的 polifill 引入到您的应用程序中。使用了 @babel/polyfill ,所有polyfill将被导入到模块的顶部。
Polyfill 实际应用场景
下面，我们通过一个示例来了解 Babel 的 Polyfill 实际应用场景。
const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map(item => item.then(() => console.log('resolved')));
Promise.all(arr).then(() => console.log('all resolved'));这里我们使用了 ECMA script 2015 的 Promise 等新特性。虽然现代浏览器都支持 Promise，但是我们要确保这段代码可以在一些旧版的浏览器上正常运行,这时候就需要使用 Babel 的 Polyfill。
首先，通过 npm 安装 Babel 的 Polyfill：
npm install --save @babel/polyfill
然后，在代码入口添加引入：
import '@babel/polyfill';
const arr = [new Promise(() => {}), new Promise(() => {})];
arr.map(item => item.then(() => console.log('resolved')));
Promise.all(arr).then(() => console.log('all resolved'));这样我们就可以保证以上代码可以运行在所有支持 ECMA script 2015 的浏览器上。
总结
Babel 的 Polyfill 是一个非常优秀的前端工具。它能够快速便捷地让你的项目兼容旧版的浏览器，让你专注于业务逻辑的开发。
在实际应用中，我们可以通过引入 @babel/polyfill 来自动 Polyfill，避免重复发明轮子。同时，也要注意一些细节问题，例如安装正确的 @babel/polyfill 版本，以及需要 Polyfill 的页面越多，打包出的代码也会越大，加大了页面的加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3088883d39b48816f6181