在前端开发中，为了实现跨浏览器的兼容性，我们常常需要引入浏览器的polyfills。polyfills主要是针对那些不支持ES6/7特性的浏览器，通过扩展API来实现浏览器的兼容性。而使用polyfills一般都需要在项目中引入一大堆的JS文件，这样就增加了项目的负担。因此，我们可以通过使用polyfills-db这个npm包来轻松的引入浏览器所需要的polyfills。
polyfills-db简介
polyfills-db是一个npm包，它内置了几乎所有可用的polyfills，并且可以根据浏览器的user agent动态选择需要加载的浏览器特性和所需的polyfills。
安装
首先，我们需要在项目中安装polyfills-db:
npm install polyfills-db
使用方法
1.引入
在项目中引入polyfills-db需要的JS文件：
import 'polyfills-db';
2.配置
polyfills-db内置了几乎所有可用的polyfills。但是，由于每个项目的需求不同，我们需要手动配置需要使用的polyfills。配置方式如下：
polyfills(
[/* ... */], // 需要支持的浏览器列表
{
/* options */
},
[/* features */] // 需要加载的polyfills
);其中，需要支持的浏览器列表是一个数组，数组中每个元素表示一个浏览器(由polyfills-db内置)，如下：
type BrowserSpec = 'chrome' | 'firefox' | 'edge' | 'ie' | 'safari';
需要加载的polyfills是一个数组，数组中每个元素表示所需加载的polyfill功能，如下：
type FeatureSpec = | 'fetch' | 'Promise' | 'abort-controller' | 'requestIdleCallback' | 'IntersectionObserver' // ......
3.使用
这里以使用Promise为例：
-- -------------------- ---- ------- -- -------------- ------ --------------- -- ----------------- -------------- -- ----- --- ------------- -- --------- ----- ------- - --- ----------------- ------- -- - -- -- --------- ---------------- --- -- ----------- ---------------- -- - ----------------- ---
注意事项
- 不要在已经支持所有polyfills的浏览器中运行polyfills-db，这样会增加不必要的负载。
- 如果配置了所有的polyfills，会导致加载时间变得非常慢，所以在配置时要小心。
最后，使用polyfills-db能够让我们方便得使用浏览器所需的polyfills功能，在某些情况下甚至能够缩小项目代码的体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74642