如果你是一名前端工程师，你一定知道浏览器兼容性是一个非常重要的问题。在这个要求不断提升的时代，如何保证我们的网站在不同浏览器中都可以正常显示和运行，是我们需要考虑的一个重要问题。而 browserslist-useragent 就是一个可以帮助我们解决这个问题的 npm 包。
什么是 browserslist-useragent
browserslist-useragent 是一个基于 browserslist 的浏览器兼容性检查工具。其主要功能是根据浏览器的 userAgent 字符串来判断浏览器的版本，然后根据指定的配置文件来确定是否支持某种特性。
browserslist-useragent 的安装
最简单的安装方法就是直接使用 npm 进行安装：
npm install browserslist-useragent --save-dev
browserslist-useragent 的使用
使用 browserslist-useragent 的流程可以分为以下几个步骤：
- 编写一个配置文件
.browserslistrc，用来指定浏览器的兼容性配置； - 根据浏览器的 userAgent 字符串来判断浏览器的版本；
- 根据指定的配置文件，判断是否支持某个特性。
下面我们来逐一介绍这几个步骤。
编写一个配置文件 .browserslistrc
在使用 browserslist-useragent 前，我们需要先编写一个配置文件，用来指定浏览器的兼容性配置。该配置文件的命名必须为 .browserslistrc，并且需要放置在项目的根目录下。
配置文件的格式非常简单，每行一个浏览器的名称或版本号。例如：
last 2 versions > 1% not IE 11
表示我们希望支持浏览器的最近两个版本、占有率超过 1% 的浏览器以及不支持 IE11。
更多关于 .browserslistrc 文件的语法和配置可以参考 browserslist 的文档。
根据浏览器的 userAgent 字符串来判断浏览器的版本
在使用 browserslist-useragent 进行浏览器兼容性判断前，我们需要先获取浏览器的 userAgent 字符串。这个字符串包含了浏览器的名称、版本以及操作系统等信息。
在前端代码中，我们可以通过 window.navigator.userAgent 来获取该字符串。例如：
const ua = window.navigator.userAgent;
根据指定的配置文件，判断是否支持某个特性
有了浏览器的 userAgent，我们接下来就可以借助 browserslist-useragent 来判断某个特性是否被支持了。
首先，我们需要使用 require 或 import 将 browserslist-useragent 引入到代码中：
const browserslist = require('browserslist-useragent');
然后，我们就可以使用 browserslist 来进行兼容性判断了。例如：
const isSupported = browserslist('last 2 versions', { userAgent: ua })
上面的代码将判断目标浏览器的 userAgent 是否匹配 last 2 versions 的配置，并将结果存储在变量 isSupported 中。如果匹配，则返回 true，否则返回 false。
实际应用
最后，我们来看一个实际的应用案例。
在前端开发中，有时我们需要根据不同的浏览器类型来进行一些不同的操作。例如，我们可能需要在不支持 ES6 语法的浏览器中使用 Babel 对代码进行转译，而对于支持 ES6 的浏览器，我们可以直接使用原生的 ES6 语法。
在这种情况下，我们可以使用 browserslist-useragent 来判断当前浏览器是否支持 ES6。具体做法是：
- 在项目根目录下新建一个
.browserslistrc文件，指定需要支持的浏览器版本； - 在代码中，获取当前浏览器的
userAgent； - 根据
userAgent和.browserslistrc中的配置，判断当前浏览器是否支持ES6； - 如果不支持，则使用
Babel进行转译，否则直接使用ES6语法。
下面是一个示例代码片段：
-- -------------------- ---- ------- ------ ------------ ---- ------------------------- -- --------- --- ----- -------------- - ------------------ - ---------- - ---------- -------------------------- --- -- ---------------- - -- -- ------------ --------------- -- ------ - ---- - -- --- ------ ----- ---- --------------- -- --- ------ -展开代码
总结
本文介绍了 npm 包 browserslist-useragent 的基本使用方法和实际应用场景。浏览器兼容性是前端开发中非常重要的一个问题，掌握这个工具将有助于我们更好地应对这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/197587
