在前端开发中，不同的浏览器对网页渲染的方式存在差异，这就给前端开发带来了很大的麻烦，需要对每种浏览器做特殊的处理。为了解决这个问题，可以使用 cani 这个 npm 包，它可以帮助前端开发者快速检查各种浏览器对某个特性的支持情况。
本教程将详细介绍 cani 的使用方法，并带你领略这个工具的强大功能。
安装 cani
可以通过 npm 包管理工具进行安装:
npm install -g cani
安装完成后，就可以在命令行中使用 cani 命令了。
使用 cani
cani 可以帮助我们查询各种前端技术在不同浏览器中的兼容性情况，如 HTML、CSS、JavaScript、SVG 等。可以通过输入 cani 命令和需要查询的技术关键字来查询：
cani css grid
上面的命令就是查询 CSS Grid 在不同浏览器中的支持情况。
查询结果如下：
-- -------------------- ---- ------- ------- ------- -------- ------ --- ------- --- ------ ----- ----- --- -- ---- --- ------ - ------ ------- -------- --- ------ ----- ------- ------ --- ------- ------- ---
cani 会给出不同浏览器的版本及支持情况，你可以通过这些数据来决定是否使用这个特性，并对不支持的浏览器做兼容性处理。
更多高级用法
除了简单的查询可以通过 cani 支持的各种选项来实现更多的功能。
1. 列出完整的支持情况
如果你想查询一个特定的版本号是否支持某个特性，可以使用 -V或 --version 选项：
cani css grid --version 57.0
可以查看特定浏览器版本对应的支持情况。
2. 限制查询范围
如果你只想查询某个级别的支持情况，例如只想查询最新主流浏览器对某个特性的支持情况，可以使用 -l或 --limit 选项，如下：
cani css grid --limit last 1 version
这个命令将只查询最近一个主流浏览器版本的支持情况。
3. 使用 cani 查找项目依赖
可以通过以下方式来查看项目所依赖的浏览器特性支持情况：
cani -r
运行该命令后，会列出项目依赖的技术及其在不同浏览器中的支持情况，并提供建议如何改进。
示例代码
以下是一个 JavaScript 示例代码，在不同浏览器中查询 ECMAScript 6 特性的支持情况：
const cani = require('cani');
let result = cani('es6', {
limit: 'last 1 version'
});
console.log(result);执行上述代码，或者在命令行中输入：
cani es6 --limit last 1 version
都可以查询出“最近一个主流浏览器版本”对 ECMAScript 6 特性的支持情况。
总结
通过 cani 工具，我们可以很容易地查询出各种浏览器对某个特性的兼容性情况，这可以帮助我们在开发过程中更准确地选择技术，并提供必要的兼容性处理。
同时，cani 的高级选项也可以让我们深入地了解浏览器支持情况的各种细节，这对我们在项目开发过程中更加重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5a21