简介
在前端开发中，我们经常需要查询不同浏览器对 CSS 或 JavaScript 的支持情况，以便编写兼容性更好的代码。caniuse 是一款广为人知的在线查询工具，但是在开发过程中反复切换浏览器窗口进行查询不仅繁琐，而且容易使我们的工作状态被打断。为了提高开发效率，在这里推荐使用一个 npm 包 caniuse-agent-versions，它可以在命令行中方便地查询不同浏览器对指定特性的支持情况，让我们的开发工作变得更加高效。
安装
使用 npm 安装 caniuse-agent-versions：
npm install -g caniuse-agent-versions
使用
查询一个特性的支持情况
查询一个特性（如 border-radius）在多个浏览器版本中的支持情况，可以使用以下命令：
caniuse-agent-versions border-radius
执行该命令后，会显示以下结果：
chrome: 4.0+ edge: 12.0+ firefox: 3.0+ ie: 9.0+ opera: 10.5+ safari: 3.1+
这表示 border-radius 在上述浏览器的指定版本中得到支持，其中 + 表示支持该特性的最低版本号，没有 + 表示只在指定版本中支持。
查询多个特性的支持情况
对于需要查询多个特性的情况，我们可以在命令行中一次性查询多个特性。例如，查询 border-radius 和 box-shadow 在多个浏览器版本中的支持情况，可以使用以下命令：
caniuse-agent-versions border-radius box-shadow
执行该命令后，会显示以下结果：
-- -------------------- ---- ------- ------- -------------- ---- ----------- ----- ----- -------------- ----- ----------- ----- -------- -------------- ---- ----------- ---- --- -------------- ---- ----------- ---- ------ -------------- ----- ----------- ----- ------- -------------- ---- ----------- ----展开代码
指定浏览器版本
默认情况下，caniuse-agent-versions 会查询所有浏览器版本中的支持情况。如果只想查询特定浏览器版本中的情况，可以使用 -b 参数指定浏览器名称和版本号。例如，查询 border-radius 在 Chrome 85 中的支持情况，可以使用以下命令：
caniuse-agent-versions -b chrome=85 border-radius
执行该命令后，会显示以下结果：
chrome: 85.0+
如果需要查询多个特性，可以使用以下命令：
caniuse-agent-versions -b chrome=85 -b firefox=79 border-radius box-shadow
执行该命令后，会显示以下结果：
chrome: border-radius: 85.0+ box-shadow: 85.0+ firefox: border-radius: 79.0+ box-shadow: 79.0+
注意，当查询多个特性时，可以使用 -b 参数为不同特性指定不同的浏览器版本。
导出 JSON 数据
如果需要导出查询结果的 JSON 数据，可以使用 -o 参数指定导出文件的路径。例如，导出 border-radius 在多个浏览器版本中的支持情况到 result.json，可以使用以下命令：
caniuse-agent-versions border-radius -o result.json
此命令执行完成后，会在当前目录生成 result.json 文件。
结语
本文介绍了 npm 包 caniuse-agent-versions 的安装和使用方法，并提供了详细的示例代码。通过使用 caniuse-agent-versions，前端开发者可以更加高效地查询不同浏览器版本对特定特性的支持情况，进而编写更加兼容性的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553d981e8991b448d124d
