在开发前端应用时，我们常常需要根据不同浏览器的兼容性问题对代码进行适配处理，为了方便前端开发者的工作，npm 上出现了一个非常实用的小工具 umi-plugin-polyfills。
什么是 umi-plugin-polyfills？
umi-plugin-polyfills是一个开源的npm包，它提供了一种轻量级的方法，帮助前端开发人员在浏览器中自动添加所需的Polyfill并构建Polyfill脚本。这个包为我们提供了一个Webpack脚本来根据项目中的Polyfill配置自动创建完整而高效的Polyfill JavaScript文件。在使用umi-plugin-polyfills之前，我们需要了解一下什么是 Polyfill。
什么是 Polyfill？
Polyfill 是一种技术，它是指用于实现新版浏览器特性的 JS 代码。在旧版浏览器当中缺少某些特性时，我们可以引入这些插件来模拟这些新特性。使用 Polyfill 机制，就可以实现在较老的浏览器中兼容 ES6 、ES7 甚至 React 新特性。
如何使用 umi-plugin-polyfills？
在使用npm包 umi-plugin-polyfills前，请确保你已经安装了 nodejs 和 webpack，然后执行以下命令安装 umi-plugin-polyfills：
npm install umi-plugin-polyfills --save-dev
安装好后，接下来就是如何使用它了。首先，在 config/config.js 文件中配置 umi-plugin-polyfills 插件：
-- -------------------- ---- -------
-- ----------------
------ ------- -
-------- -
-
-----------------------
-
--------- -
-
------- ----
-------- ----------------- ----------------------------- ----------------------------- --------------------------------------------- ---------------- ------------------------------ ------------------------ ----------------------------- -------------- ------------------------ ----------------- -------------------- ----------------------- ------------- ---------------- ------------------------------- ----------
--
-
------------- -------------------
--
-
----- --------
----- -----------
--
-
----- ------
----- ------
--
-
----- ------
----- ------
--
-
----- ----------
----- ------
--
-
----- ----------
----- ------
--
-
----- ----------------
----- ------
--
-
----- ----------
----- ------
--
-
----- -------------
----- ------
--
-
-
-
-
-它的参数 features 是必须的，而且必须是一个对象数组。对象的各个属性含义如下：
modules: 在运行时加载的 core-js 模块的一个数组。dependencies: polyfill 的依赖项。name: polyfill 的名称。type: polyfill 的类型。
其中 modules 是必填项，其余是非必填项。
示例代码
我们通过一个具体的案例来看看如何使用 umi-plugin-polyfills 模块实现 Polyfill。
-- -------------------- ---- -------
------ ------------------------------
------ -------------------------------------
------ ---------------
------ ----- ---- --------
------ - ------ - ---- ------------
----- --- ------- --------------- -
-------- -
------ -
---------- -----------
-
-
-
----------- --- ---------------------------------在以上代码中，我们通过 import 语法引入了 core-js 和 whatwg-fetch 的模块，然后使用了 React 中的组件和 ReactDOM 中的 render 方法。这样就可以在旧版浏览器中使用 ES6 新特性了。如果我们没有在代码中引入 polyfill 模块，在旧版浏览器中将会出现各种莫名其妙的错误。
结束语
在前端开发中，为了兼容不同的浏览器，我们经常需要手动引入 polyfill 模块，这样的工作量很大，而且又枯燥又违反 DRY 原则。因此，我们可以使用 umi-plugin-polyfills 来帮助我们快速创建一个完整的、高效的 polyfill。希望这篇文章可以帮助你快速掌握 umi-plugin-polyfills 的使用，提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad9cb5cbfe1ea0610cb5