当我们在进行前端开发的时候，需要了解不同浏览器的支持情况，才能写出兼容性更好的代码。如果手动去查询每个浏览器的支持情况，那么显然效率很低。
这时候，npm 包 browserstats 就可以帮助我们了。它可以提供浏览器的市场占有率和特性支持情况等数据，同时也可以查看浏览器版本的趋势图。
下面我们就来详细学习一下这个 npm 包的使用方法。
安装
首先，我们需要使用 npm 在项目中安装 browserstats。在终端中输入：
npm install browserstats --save-dev
这样就可以把 browserstats 安装到项目中了。
使用
获取浏览器市场占有率
在代码中使用 browserstats，可以通过以下方法来获取浏览器市场占有率：
const browserstats = require('browserstats');
const stats = browserstats.getStats();
console.log(stats);运行以上代码，控制台输出的就是浏览器市场占有率。
获取浏览器特性支持情况
同样，在代码中使用 browserstats，可以通过以下方法来获取浏览器的特性支持情况：
const browserstats = require('browserstats');
const support = browserstats.getSupport();
console.log(support);运行以上代码，控制台输出的就是浏览器特性支持情况。
获取浏览器版本趋势图
还可以使用以下方法来获取浏览器版本趋势图：
const browserstats = require('browserstats');
const trend = browserstats.getTrend();
console.log(trend);运行以上代码，控制台输出的就是浏览器版本趋势图。
示例代码
以下是一个完整的示例代码，演示了如何在一个页面中展示以上三个功能的结果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
-------
------
-----------------
---- -----------------
------------------
---- -------------------
-----------------
---- ---------- ------ -------
------- -------------------------
--------
----- ------------ - ------------------------
----- ----- - ------------------------
----- ------- - --------------------------
----- ----- - ------------------------
------------------------------------------ - --------------------- ----- ---
-------------------------------------------- - ----------------------- ----- ---
------------------------------------ - ---------------------------------
---------
-------
-------以上代码中，我们使用了 JSON.stringify 方法把获取到的结果转化为字符串，使用 pre 标签展示到页面上。同时，为了展示浏览器版本趋势图，我们使用了 img 标签，并在脚本中通过 Base64 编码的方式把获取到的图像数据赋值给了该标签的 src 属性。这样，我们就可以在一个页面中展示 browserstats 的三个功能了。
总结
以上就是 npm 包 browserstats 的基本使用方法。通过使用该包，我们可以快速获取到浏览器市场占有率、特性支持情况和版本趋势图等数据，极大地提高了我们的开发效率。对于需要在不同浏览器上测试兼容性的开发者来说，使用 browserstats 就更加必要和实用了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde519e