如何在前端开发中快速了解浏览器兼容性？这是一个广受关注的问题。解决这个问题的一个好的方法就是使用如 how-caniuse 这样的 npm 包。how-caniuse 把 caniuse 数据库中的数据导入到了你的命令行中，让你可以在终端上轻松查询浏览器兼容性信息。
本教程将会提供 how-caniuse 的基本使用方式，如何在项目中使用 how-caniuse，以及如何使用 how-caniuse 的高级功能。
基本用法
首先需要确保你已经正确地安装了 Node.js 和 NPM。在终端中运行以下命令来安装 how-caniuse：
npm install -g how-caniuse
接下来，你可以在终端中输入 how-caniuse 命令来启动工具。比如我们想要了解 CSS display: flex 属性在不同浏览器中的兼容性，我们可以输入以下语句：
how-caniuse flexbox
接下来会在终端中输出如下信息：
-- -------------------- ---- ------- ------------------------ - ------- - ------- ------------------------ - ----- -------- -- - ------------------------ - ------ - -------- ---- - ------------------------ - ------ - ---- ---- - ------------------------ ------------------------ - ------- - ------- - ------------------------- - ----- -------- -- - ------------------------- - ------ - ----- ---- - ------------------------- - ------ - -------- ---- - ------------------------ ------------------------ - ------- - ------ - ------------------------- - ----- -------- --- - ------------------------- - ------ - -------- --- - ------------------------ ------------------------ - ------- - ----- - ------------------------- - ----- -------- -- - ------------------------- - ------ - -------- ---- - ------------------------- - ------ - ---- ---- - ------------------------- - ------ - --- ---- - ------------------------- - ------ - ------- ----- - ------------------------ ------------------------ - ------- - ---- - ------------------------- - ----- -------- -- - ------------------------- - ------ - -------- ---- - ------------------------- - ------ - ---- ---- - ------------------------
这就是 how-caniuse 的基本使用方式。你可以在命令行中输入任意 CSS、JS 或 HTML 特征来查询其在不同浏览器中的兼容性信息，如：how-caniuse es6，或 how-caniuse requestAnimationFrame。
在项目中使用 how-caniuse
在项目中使用 how-caniuse，可以帮助你快速了解每个特征在浏览器中的支持情况。通过如下操作，你可以在命令行界面中输入你的项目相关信息，生成包含浏览器兼容性信息的 HTML 文件：
首先，你需要创建一个 projects.json 文件，用于指定你的项目信息。在该文件中，你需要设置项目名称，以及相关的特征信息。如下所示：
-- -------------------- ---- -------
-
----------- -
-
------- --- ---------
----------- -
--------- --------------
---------------------
-----------------
-
-
-
-接着，你可以在项目根路径下，运行如下命令：
how-caniuse --projects projects.json
经过该命令处理，你将得到一个带有兼容性信息的 HTML 文件，可以在浏览器中直接打开。在该文件中，你可以看到每个特征在不同浏览器和操作系统中的支持情况。
如何使用 how-caniuse 的高级功能
how-caniuse 还提供了一些额外的高级功能，如基于“未来浏览器规范”检测兼容性信息，以及从 Github 抓取你的项目并为其生成兼容性信息。但是，这些功能需要一些额外的设置和脚本。详情请查看官方文档。
总结
在前端开发中，如何快速了解浏览器兼容性是一项关键的技能。how-caniuse 是一个好用的 npm 包，可以让你在命令行中快速查询兼容性信息。同时，how-caniuse 也可以在项目中使用，帮助你生成带有兼容性信息的 HTML 文件。我希望这篇文章对你有所帮助，让你能够更好地优化你的前端开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555381e8991b448d285d