在前端开发过程中，我们常常需要在不同的浏览器上进行测试，确保网站能够兼容不同的浏览器。不同的浏览器有着不同的支持情况，因此，在不同的浏览器上，网站也会呈现不同的效果。
要解决这个问题，我们需要使用 polyfill 技术。Polyfill 是指“填补补丁”的意思，通过在不支持某些 ECMAScript 功能的老的浏览器上加载 JavaScript 文件来实现这些功能。Webpack 是当下流行的构建工具之一，利用它来加载 polyfills，可以在打包后的 JS 文件中自动注入 polyfills。
html-webpack-polyfills-plugin 是一个可以自动添加 polyfills 到 HTML 文件中的插件。本文将向大家介绍如何使用它，并附带使用示例。
安装
在安装之前，请确保已经安装了 webpack。安装 html-webpack-polyfills-plugin，只需要在命令行中输入以下命令：
// 使用 NPM 安装 npm install --save-dev html-webpack-polyfills-plugin // 使用 Yarn 安装 yarn add --dev html-webpack-polyfills-plugin
使用
在 webpack.config.js 文件中引入 html-webpack-plugin 和 html-webpack-polyfills-plugin，然后使用 html-webpack-polyfills-plugin 配置 polyfills 和平台支持列表，如下所示：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - -----------------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------------
---
--- ----------------------------
--------- -
-------- - -- -- -----
--------------- ----------- -------
--
------------- ------ -- -- ----------
------ ----- -- -- ---
--
------- -----
--------- ------------ ------------------ -------------------- ------------- ---------------
------- -----
--------- ------------
---
--
---
--上述代码片段中，我们首先引入了 html-webpack-plugin 和 html-webpack-polyfills-plugin，然后在 plugins 中声明了这两个插件。
HTMLWebpackPolyfillsPlugin 的参数包含以下选项：
features： (required) 要打开的 polyfills 名称和它们的依赖项列表。如果没有依赖项，则可以将其设置为true。如果不需要该 polyfill，则可以将其设置为false。示例中展示了三个例子，其中只有 "Map" 开启且没有依赖项， "fetch" 开启且依赖于 "promise" 和 "url"，而 "Array.from" 已被禁用。fetch和promise是常见的 polyfills，因为大多数旧浏览器都不支持它们。minify： 是否缩小注入到 HTML 文件中的 polyfill 文件。缩小可以减小文件大小，但也会增加打包时间。uaString： User-agent 字符串，用于生成不同的 polyfills，具体原因可以参考文档中的说明。always： 是否应向结果添加 polyfill。对于必要的 polyfill，建议将其设置为true。这也意味着即使浏览器本身支持该功能，该 polyfill 仍将被添加。filename： 输出文件名，默认为"index.html"。
示例
假设有如下 HTML 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------- --------- ------ --------------- ------- ------ ---------- ----------- ------- -------
我们可以在 webpack.config.js 的 plugins 中配置 html-webpack-polyfills-plugin 使得它在构建时为浏览器添加必要的 polyfills。 在拥有以上两个文件的情况下，我们可以使用以下配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------------------------- - -----------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - --------
--
----- -------------
-------- -
--- -------------------
--------- ----------------------
---
--- ----------------------------
--------- -
-------- - -- -- -----
--------------- ----------- -------
--
------------- ------ -- -- ----------
------ ----- -- -- ---
--
------- -----
--------- ------------ ------------------ -------------------- ------------- ---------------
------- -----
--------- ------------
---
--
--这样，在构建时就会生成包含必要 polyfills 的 index.html 文件，以确保我们的应用程序能在各种浏览器及其版本上正常运行。
总结
在本文中，我们介绍了如何使用 npm 包 html-webpack-polyfills-plugin 来添加 polyfills 到 HTML 文件中，进而实现浏览器的兼容性。这个工具可以大大减轻前端开发人员的负担，方便进行多浏览器兼容性测试。当然，我们在工作中也要注意遵循 web 标准，尽量写出符合标准的代码，减少需要使用 polyfill 进行兼容的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448ddffb