在前端开发中，浏览器对语言本身的支持程度存在差异，为了兼容所有浏览器，我们需要手动添加一些 polyfills（填充物）来实现相应功能的支持。npm 包 @excitare/polyfills （以下简称 polyfills）就是一个提供常见 Polyfills 的 npm 包，本文将介绍如何使用 polyfills 以及得到更好的使用体验。
安装 polyfills
在使用 polyfills 前，我们需要先安装它。打开命令行，输入以下命令：
npm install @excitare/polyfills --save
这将会在项目中安装 polyfills，同时添加它到 package.json 中的 dependencies 中。
使用 polyfills
polyfills 相较于其他例如 babel-polyfill、core-js 等更小巧，因为它只包含实现 ECMA 标准的一组 polyfills，因此需要我们自己来选择加载哪些 Polyfills。
polyfills 的 API 和 ES 标准 API 一致，下面我们以 Promise 为例来展示如何使用 polyfills。
首先，在需要使用 Promise 的文件中，首先引入 Polyfills：
import "@excitare/polyfills";
然后在需要使用 Promise 的地方使用它即可：
new Promise(resolve => resolve())
.then(() => console.log("Polyfill is working!"));在支持 Promise 的浏览器中，控制台会输出 "Polyfill is working!"。而在不支持 Promise 的浏览器中，这段代码使用 polyfills 就能正常运行。
配置 polyfills
默认情况下，polyfills 是通过在文档 head 中插入脚本标签来实现加载。但是我们也可以通过设置环境变量并在构建时将需要的 Polyfills 打包进去。
例如，我们希望在不支持 Promise 的浏览器中使用 polyfills，但是我们并不需要所有的 polyfills。我们可以使用 BROWSERSLIST 环境变量，只将需要的 Polyfills 打包进去。
BROWSERSLIST=ie11 npx webpack
这将会在打包时将需要的 Polyfills 打包进去，而不会将所有 Polyfills 都打包进去。
示例代码
上面介绍的内容，我们写一个简单的示例代码来验证一下：
npm install @excitare/polyfills --save
在 index.js 中写入：
-- -------------------- ---- -------
------ ----------------------
--- --------------- -- ----------
-------- -- --------------------- --- ------- -- -----------
--------- -- --------------------- --- ------- -----------
-- ------- ----- --- ------------ -
--------------------- --- ----- -- -----------
-在 index.html 中写入：
-- -------------------- ---- -------
--------- -----
------
------
----------- --- -----------------
-------
------
------- ------------------------------
-------
-------执行以下命令：
npx webpack
引入 dist/bundle.js 后，打开 index.html 即可看到在支持 fetch 但不支持 Promise 的浏览器中打印出：
Polyfill for Promise is working! Polyfill for fetch is working!
而在完全支持的浏览器中只会输出：
Polyfill for Promise is working!
这说明 polyfills 能够很好地地兼容我们的程序，在大部分浏览器中实现了相应功能。
总结
本文介绍了如何使用 npm 包 @excitare/polyfills，让程序在不支持语言本身的特性的浏览器中也能正常运行，提高了程序的兼容性和稳定性。同时，还介绍了修改环境变量以及代码示例来指导读者使用 polyfills，希望能对读者提供有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53d21