引言
前端工程师的日常工作中，我们需要关注浏览器兼容性问题，并且根据业务需求选择合适的浏览器版本。常见的做法是使用 Browserslist，它是一个用于获取浏览器列表的工具，支持从 Can I Use 网站自动生成浏览器列表和手动配置。
但是，手动配置的方式对于项目庞大的团队来说是非常繁琐的。解决这个问题的 npm 包就是我们今天要介绍的 @wessberg/browserslist-generator。
@wessberg/browserslist-generator 是一个命令行工具，它可以自动根据当前项目的 package.json 中的浏览器配置，生成对应的 browserslist 配置文件。这样做的好处是避免手动维护浏览器配置文件，减少出错风险并增加团队成员的效率。
本文将详细讲解 @wessberg/browserslist-generator 的使用方法，并结合示例代码演示怎样应用 @wessberg/browserslist-generator 进行项目管理。
安装
安装 @wessberg/browserslist-generator 的方法非常简单，只需要在项目中使用 npm 安装即可。
--- ------- ---------- --------------------------------
使用说明
该 npm 包支持两种方式生成某个项目的浏览器列表配置：
在 package.json 中添加 browserslist 字段，并将其用于查询。推荐。
根据
.browserslistrc文件生成配置。
推荐使用第一种方式，因为它可以与项目的 package.json 文件一起使用。
配置 package.json
首先，打开项目的 package.json 文件，添加一个 browserslist 字段。这个字段包含一个规范化的浏览器列表。例如：
-
--------------- -
-----------
---- -- ----
---- ------ ----
----------- ---- ---------
-
-这个配置与 Browserslist 的语法是相同的，现在你可以运行如下命令，生成浏览器列表文件：
----------------------------------------- - ---------------
注意：这个命令会将我们的浏览器列表写入 .browserslistrc 文件中。如果这个文件已经存在，则会覆盖它，所以请务必在操作之前备份它。
我们来看下面这个例子，在 package.json 中，我们列出了我们想要支持的浏览器的最低版本：
-
--------------- -
--- -- ----
----- -- ----
------- -- ---
-
-在运行以下命令后会在项目根目录下生成名为 .browserslistrc 文件：
--- ---------------------
我们打开 .browserslistrc，可以看到内容如下：
-- -- ---- -- ------ --
这就是自动生成的浏览器版本配置。
根据 .browserslistrc 自动生成
第二种配置方式是根据 .browserslistrc 文件自动生产启用的浏览器版本配置，方法也非常简单。只需要在项目根目录下新建名为 .browserslistrc 的文件，并将浏览器列表配置在其中，例如：
-- -- ---- -- ------ --
这个 .browserslistrc 文件也可以包含多个查询，以逗号分隔：
- -- ---- - -------- --- -- -- -- --- ----
接下来，我们可以在 npm script 中运行该 npm 包，生成对应的 browserslist 文件。在 package.json 中添加如下脚本：
-
---------- -
--------------- ---------------------- - ----------------
-
-现在，我们只需要执行如下命令，即可在项目根目录下生成名为 .browserslistrc 的文件了。
--- --- ------------
结语
通过了解 @wessberg/browserslist-generator，我们知道了它如何帮助我们自动化生产浏览器列表配置文件。我们建议配置 package.json，并使用 generate-browserslist 命令生成配置文件。这个工具的用法简单，但是在项目管理中却非常有用，它可以帮助我们更智能地管理项目，避免出错，减少提高团队效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/131850