简介
polyfill-service 是一个用于浏览器兼容性的 polyfill 服务，它能够使您的 JavaScript 代码在旧版本浏览器中正常运行。它使用了 polyfill.io 提供的 polyfill 代码库，并提供了一些额外的功能，例如通过按需下载 polyfill 包来减少JavaScript 文件大小，提供了一个 JavaScript 包装器，来帮助您更容易地写出兼容性代码，也支持直接在页面上搜索 polyfill。
安装
使用 npm 或 yarn 进行安装。
npm install polyfill-service yarn add polyfill-service
使用
简单的使用
在您的 JavaScript 代码中，您需要首先导入 polyfill-service， 然后在需要的地方调用 getPolyfillString 方法。这个方法将会返回所有需要的 polyfill 代码，您需要将返回的代码插入到您的页面中。
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------------- ----- -------------- - ------------------- --------- ----------- ---------------- ----------------- ------- ----- ---- ---- --- -- ---------------- - ----------------------------------------------------- -
在上面的代码中，我们传入了三个 polyfill 的特性名称：Promise、Array.isArray、Object.assign。minify 选项表示需要将您的 polyfill 代码进行压缩，以减小文件体积。rum 选项开启 polyfill 记录，能够通过浏览器的 performance API 记录 polyfill 加载的相关信息。
如果您不需要 RUM 的功能，可以配置 rum:false，以减小渲染产生的性能开销。
懒加载功能
polyfill-service 提供了通过按需加载的方式来减小你的 polyfill js 文件。这样我们可以将不必要的 polyfill js 代码进行懒加载，从而减小文件体积，提升页面响应速度。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------- --------------- --------- -------------------------------------- ------- ----- ---- ----- ---------- -- - -- ---------------------- -------------------- ----------- -- - -- ---------- ---------------------- ---
在上面的代码中，我们使用了 loadPolyfills 方法，传入了与 getPolyfillString 方法相同的参数。当这个函数执行成功后，就可以在回调中进行主要业务逻辑的编写。如果加载失败，就可以使用另一个回调函数来提示用户。
使用 HTML 文件内置的 polyfill 脚本
如果您不想在页面中使用 JavaScript <script> 标签来获取 polyfill 脚本，您同样可以在 HTML 文件中嵌入这些脚本。 在这种情况下，你需要在你的 HTML 文件中嵌入一行特殊的标记:
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
------- ----- ------------------------- -------------- ---------
-------
------
--------- ----------
--------
----- ---- - - -- - --
----- ---- - ----------------- ------
------------------ -- -- -----
---------
-------
-------在上面的 HTML 内容中，我们使用 defer 属性来告诉浏览器当前脚本不需要立即执行，需要等到页面中的其他脚本执行完毕后再执行。同时，我们在 script 标记之间添加了 data-polyfill 属性。这个属性是 polyfill-service 的关键，在浏览器加载该脚本时，polyfill-service 将自动判断哪些 polyfill 代码需要被下载并插入到页面中。
结语
在本篇文章中，我们详细介绍了 polyfill-service 的使用方法，包括导入、基本使用、使用 HTML 文件内置的 polyfill 脚本等。希望本篇文章对你了解 polyfill-service 有所帮助。在实际的前端开发过程中，polyfill-service 可以帮助您很好的解决浏览器兼容性问题，提升您的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73809