前端开发中，我们经常需要在不同的浏览器环境下测试我们的代码。而这就需要我们对不同浏览器的支持情况有所了解。针对这个问题，有一个很好用的 npm 包 browser-list 可以帮助我们快速获取不同浏览器的支持情况。
什么是 browser-list
browser-list 是一个可以获取所有主要浏览器的清单并检查它们的版本。它还支持自定义查询条件，例如特定版本的浏览器以及特定操作系统上的浏览器。
如何安装和使用
- 安装
使用 npm 包管理器进行安装：
npm install browser-list --save-dev
- 使用
安装完之后，我们可以在项目中引入 browser-list 的模块，并使用其中的方法进行浏览器环境的检查。下面是一个简单的示例代码：
const browserList = require('browser-list');
const versions = browserList('> 1%', { ignoreMinor: true, mobileToDesktop: true });
console.log(versions);在这个代码示例中，我们使用了 browserList() 方法并传入了两个参数。第一个参数 '> 1%' 表示我们要获取支持率大于 1% 的浏览器，第二个参数 { ignoreMinor: true, mobileToDesktop: true } 是一个可选参数，这里我们将它的值设定为返回结果不区分移动设备与桌面设备，以及忽略浏览器版本号的小数部分。
执行完上面的代码后，我们就可以在控制台中看到输出的浏览器信息了。
自定义查询条件
除了使用固定的查询条件，我们还可以通过自定义查询条件，来获取特定条件下的浏览器数据。下面是一个自定义查询条件的示例：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- -------- - -------------
-- -- --- ---------
--- -
------ --- --
-
---
----------------------在这个示例中，我们使用了自定义查询条件来获取所有版本号小于等于 8 的 IE 浏览器数据。这个模式跟我们之前使用的模式略有不同，这里的第一个参数不再是查询条件的字符串而是一个 JSON 格式的对象。
总结
browser-list 是一个非常强大的 npm 包，它可以帮助我们快速获取不同浏览器的支持情况。使用它，我们可以快速作出响应式设计，提升前端的开发效率和性能。在使用时需要注意传入的参数，配置自定义条件可以满足更多的开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde513c