引言
前端工程师的日常工作中，我们需要关注浏览器兼容性问题，并且根据业务需求选择合适的浏览器版本。常见的做法是使用 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 install --save-dev @wessberg/browserslist-generator
使用说明
该 npm 包支持两种方式生成某个项目的浏览器列表配置：
在 package.json 中添加 browserslist 字段，并将其用于查询。推荐。
根据
.browserslistrc文件生成配置。
推荐使用第一种方式，因为它可以与项目的 package.json 文件一起使用。
配置 package.json
首先，打开项目的 package.json 文件，添加一个 browserslist 字段。这个字段包含一个规范化的浏览器列表。例如：
{ "browserslist": [ "defaults", "not IE 11", "not IE_Mob 11", "maintained node versions" ] }
这个配置与 Browserslist 的语法是相同的，现在你可以运行如下命令，生成浏览器列表文件：
./node_modules/.bin/generate-browserslist > .browserslistrc
注意：这个命令会将我们的浏览器列表写入 .browserslistrc 文件中。如果这个文件已经存在，则会覆盖它，所以请务必在操作之前备份它。
我们来看下面这个例子，在 package.json 中，我们列出了我们想要支持的浏览器的最低版本：
{ "browserslist": [ "ie >= 11", "edge >= 16", "chrome >= 62" ] }
在运行以下命令后会在项目根目录下生成名为 .browserslistrc 文件：
npx generate-browserslist
我们打开 .browserslistrc，可以看到内容如下：
ie 11 edge 16 chrome 62
这就是自动生成的浏览器版本配置。
根据 .browserslistrc 自动生成
第二种配置方式是根据 .browserslistrc 文件自动生产启用的浏览器版本配置，方法也非常简单。只需要在项目根目录下新建名为 .browserslistrc 的文件，并将浏览器列表配置在其中，例如：
ie 11 edge 16 chrome 62
这个 .browserslistrc 文件也可以包含多个查询，以逗号分隔：
> 1% last 2 versions not ie <= 11 not dead
接下来，我们可以在 npm script 中运行该 npm 包，生成对应的 browserslist 文件。在 package.json 中添加如下脚本：
{ "scripts": { "browserslist": "generate-browserslist > .browserslistrc" } }
现在，我们只需要执行如下命令，即可在项目根目录下生成名为 .browserslistrc 的文件了。
npm run browserslist结语
通过了解 @wessberg/browserslist-generator，我们知道了它如何帮助我们自动化生产浏览器列表配置文件。我们建议配置 package.json，并使用 generate-browserslist 命令生成配置文件。这个工具的用法简单，但是在项目管理中却非常有用，它可以帮助我们更智能地管理项目，避免出错，减少提高团队效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/131850
