发布时间：2025 年 5 月 7 日
Browserslist 是用于在前端代码库中配置最低支持的浏览器版本的最热门工具之一。开发者将 browserslist 查询添加到其 package.json 文件中，Browserslist 会公开至少支持的浏览器列表。Browserslist 可与各种热门 lint、polyfill 和打包工具搭配使用，包括：
- 自动前缀器
- 使用
@babel/preset-env的 Babel - 使用
postcss-preset-env的 PostCSS - 使用
eslint-plugin-compat的 ESLint - 使用
stylelint-no-unsupported-browser-features的 Stylelint - webpack
基准目标
决定使用基准组时，您应考虑自己的用户群，并确定要定位到哪个基准组功能集：
- 广泛使用的基准包括过去 30 个月或更长时间内基准核心浏览器组件完全支持的所有 Web 功能。
- 基准年份功能集（例如 2020 年基准）包含在指定年份结束时新推出的所有功能。
根据您的用户群，您或许可以定位到“广泛发布的基准组”，或者需要定位到较早的基准年份。查看您的分析工具或 RUM 工具，了解用户使用的是哪些浏览器版本。
安装 browserslist-config-baseline
确定要定位到哪个基准功能集后，您可以将该目标应用于开发者工具。对于使用 browserslist 的任何工具，最简单的方法是安装 browserslist-config-baseline：
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
如何定位到“广泛提供的基准”
如需定位到“广泛提供的基准”，请使用 extends 关键字在 package.json 中更新或添加 browserlist 配置：
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
当 browserslist 加载其支持的浏览器列表时，browserslist-config-baseline 会动态生成当前支持所有现已广泛提供的功能的最低浏览器版本。您还可以将 extends browserslist-config-baseline 添加到 .browserslistrc 文件，系统会以相同的方式处理它。
如何定位基准年份
如果您要定位到基准年份特征集，请在 browserslist 查询的末尾添加 / 和采用 YYYY 格式的年份：
"browserslist": "extends browserslist-config-baseline/2020"
如何指定下游浏览器
基准核心浏览器组合包括 Chrome、Edge、Firefox 和 Safari。其他浏览器基于与 Chrome 和 Edge 相同的开源代码（Chromium），并且应支持与其实现的 Chromium 版本相同的功能集。
browserslist-config-baseline 使用 baseline-browser-mapping 将浏览器版本与其支持的功能集相关联。baseline-browser-mapping 中提供了适用于 UC 移动版浏览器和 QQ 移动版浏览器的映射，未来可能会添加其他浏览器。
如需在基准配置中添加这些浏览器，请在 browserslist 配置中的模块名称后面立即添加 /with-downstream：
"browserslist": "extends browserslist-config-baseline/with-downstream"
或者：
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
browserslist-config-baseline 运作示例
在打包工具中
将 browserslist-config-baseline 添加到代码库可能会立即生效。Babel 是用于打包 JavaScript 的常用构建工具。如果您使用 @babel/preset-env 软件包默认设置，许多新型 JavaScript API 和方法将被旧版浏览器所需的更详尽的语法替换：
不过，在同一示例项目中将 browserslist-config-baseline 设为以基准 2020 为目标平台后，此 JavaScript 的输出大小会大幅缩减，因为需要的语法转换更少：
您可以使用 Google Chrome Labs baseline-demos 代码库中的示例代码自行尝试。
在 linters 中
有些 lint 工具已经可以与 Browserslist 搭配使用，或者可以使用兼容性模块与 Browserslist 搭配使用。例如，stylelint 可以使用 stylelint-browser-compat 模块使用 browserslist 配置。将 stylelint.config.js 文件设置为使用 browserslist-config-baseline：
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint 现在会标记目前不属于“广泛可用”基准的 CSS：
Stylelint 还提供了一个插件，可让您直接设置基准规则，但如果您已经在使用 browserslist 来处理配置，则 browserslist-config-baseline 是一个可直接替换的解决方案。
如何为 browserslist-config-baseline 贡献
如果您想为 browserslist-config-baseline 提出功能请求，请在 GitHub 代码库中创建问题或拉取请求。
如果您想贡献更多下游浏览器数据或报告数据问题，请在 baseline-browser-mapping 代码库中创建问题或提交拉取请求。