请解释 browserslist 在前端工程中的定义、主要用途，并给出一种常见的配置方式。

回答思路

1. 【回答框架 1】browserslist 是一个配置工具，用于声明项目需要支持的浏览器及 Node.js 版本范围。它本身不是构建工具，而是被 Autoprefixer、Babel、PostCSS、eslint-plugin-compat 等工具读取，以此决定需要添加哪些 CSS 前缀、转译哪些 JavaScript 语法，以及进行相应的兼容性处理。
2. 【回答框架 2】它的核心作用是统一管理兼容性目标，避免在多个工具中重复配置。通过在 package.json 中新增 browserslist 字段或创建单独的 .browserslistrc 文件，可以集中定义目标浏览器列表，让所有相关工具自动采用同一套配置，从而减少不一致和冗余。
3. 【回答框架 3】配置方式有两种：一是在 package.json 中编写 browserslist 字段，例如 {"browserslist": ["last 2 versions", "not dead"]}；二是创建 .browserslistrc 文件，按行编写规则，比如 last 2 versions、not dead、> 0.2% 等。此外，还支持通过 BROWSERSLIST 环境变量或配置文件来指定。
4. 【回答框架 4】配置规则中常用关键词包括：last 2 versions（最近两个版本）、> 0.5%（全球使用率大于 0.5%）、not dead（排除 24 个月内无官方支持的浏览器）、以及具体的浏览器版本号。这些规则会自动覆盖 npm 提供的数据，并可在构建时通过 npx browserslist 命令验证生效的浏览器列表。
5. 【回答框架 5】在实际项目中，推荐将 browserslist 与 Autoprefixer、Babel 的 preset-env 配合使用，这样既保证了对旧浏览器的兼容，又可避免过度转译。同时需要留意浏览器数据来源是 caniuse 数据库，使用“last 2 versions”可能不会包含仍在使用的低版本，因此应结合业务用户的具体情况调整规则。
6. 【关键点 1】browserslist 用于声明目标浏览器和 Node.js 版本范围。
7. 【关键点 2】它被 Autoprefixer、Babel 等工具引用，以实现自动兼容处理。
8. 【关键点 3】通过 package.json 字段或 .browserslistrc 文件统一配置。
9. 【关键点 4】常用规则包括 last 2 versions、> 0.5%、not dead 等。
10. 【关键点 5】使用 npx browserslist 可验证最终生效的浏览器版本列表。
11. 【易错点 1】不要认为 browserslist 本身会执行转译，它只是提供目标列表，实际处理由其他工具完成。
12. 【易错点 2】“last 2 versions”不保证覆盖所有真实用户，需结合业务版本使用情况调整规则。
13. 【易错点 3】配置不一致会导致各工具采用不同兼容目标，因此应确保统一配置入口。