前言
在前端开发中，我们需要确保网站或应用程序能够在多个不同的浏览器上运行。而不同的浏览器具有不同的版本和特性，为了方便管理和维护，我们通常使用 Browserslist 来管理浏览器的兼容性。
Browserslist 是一个配置文件，可以指定支持的浏览器。@davidhund/browserslist-config 提供了一个预配置文件，可以帮助我们更轻松地管理浏览器兼容性。
安装
我们需要在项目中安装 @davidhund/browserslist-config，可以使用 npm 或 yarn 进行安装。
# 使用 npm 安装 npm install --save-dev @davidhund/browserslist-config # 或者使用 yarn 安装 yarn add --dev @davidhund/browserslist-config
使用
一旦安装了 @davidhund/browserslist-config，我们需要在项目的根目录下添加一个 browserslist 文件，这个文件可以指定支持的浏览器和它们的版本。
// browserslist extends @davidhund/browserslist-config
可以使用 npx browserslist 命令来检查已安装预配置文件后的浏览器列表。
npx browserslist
配置文件详解
@davidhund/browserslist-config 预配置文件是通过分析流行度统计数据得出的。该文件预设了支持目前最新的浏览器版本和一些比较古老的浏览器版本，以便于跨平台开发。
下面是一个支持最新的两个主流浏览器版本：
// browserslist extends @davidhund/browserslist-config last 2 major versions
这里还指定了最近两个主流版本，其中最后 major 指的是主要版本号。
// browserslist extends @davidhund/browserslist-config last 2 Chrome versions last 2 Firefox versions last 2 Safari versions
如果你只希望支持特定的浏览器，可以像下面这样指定：
// browserslist extends @davidhund/browserslist-config chrome 77 firefox 68
使用示例
我们可以使用 @babel/preset-env 与 Browserslist 配合使用，来自动根据不同的浏览器版本进行代码转换。
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
-
--------------------
-
-------- -
--------- -
----- - ----------
-- ----
---- -- ---
-------- -- -----
--- -- ---
--
--
------------ --------
------- -
-------- --
---------- -----
--
--
--
--
--上面的代码使用 @babel/preset-env 预设，指定了要支持的浏览器，和是否需要使用内置的函数和对象来实现语言特性。
结合 @davidhund/browserslist-config，我们只需要根据需要指定自己需要支持的浏览器版本，即可享受到这个预配置文件带来的方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e076b