发布时间：2025 年 5 月 7 日，上次更新时间：2025 年 9 月 17 日
Browserslist 是用于在前端代码库中配置最低支持的浏览器版本的最热门工具之一。开发者将 browserslist 查询添加到 package.json 文件（或 Browserslist 的其他配置点，例如 .browserslistrc 文件），然后 Browserslist 会公开一个最低支持的浏览器列表。Browserslist 可与各种热门的代码检查、polyfill 和打包工具搭配使用，包括：
- Autoprefixer
- 使用
@babel/preset-env的 Babel - 使用
postcss-preset-env的 PostCSS - 使用
eslint-plugin-compat的 ESLint - 使用
stylelint-no-unsupported-browser-features的 Stylelint - webpack
基准目标
当您决定使用 Baseline 时，应考虑用户群，并决定要定位哪个 Baseline 功能集：
- Baseline 广泛可用包括过去 30 个月或更长时间内受到 Baseline 核心浏览器集完全支持的所有 Web 功能。
- 基准年份功能集（例如 Baseline 2020）包含在指定年份年底处于新近可用阶段的所有功能。
根据您的用户群，您或许可以定位“Baseline 广泛可用”功能，或许需要定位较旧的 Baseline 年份。请咨询您的分析工具或 RUM 工具，了解您的用户使用的是哪些浏览器版本。
如何以“Baseline 新近可用”或“Baseline 广泛可用”为目标
Browserslist 通过几种不同的查询内置了对 Baseline 的支持。如果您想定位到 Baseline 新近可用的浏览器，请尝试在 Browserslist 配置中指定 baseline newly available：
{
...
"browserslist": [
"baseline newly available"
]
...
}
您也可以将 baseline widely available 指定为查询：
{
...
"browserslist": [
"baseline widely available"
]
...
}
如何定位基准年份
如果您想以某个基准年份的功能集为目标，可以在查询中指定相应年份，例如，如果您想以 2024 年的功能集为目标，可以指定 baseline 2024：
"browserslist": "baseline 2024"
您可以指定 baseline 2015 年到当前年份之间的年份。
如何指定下游浏览器
Baseline 核心浏览器组包括 Chrome、Edge、Firefox 和 Safari。其他浏览器基于与 Chrome 和 Edge 相同的开源代码 (Chromium)，并且应支持与它们所实现的 Chromium 版本相同的功能集。如需在基准配置中包含这些浏览器，请在基准查询后添加 with downstream。例如，如需将下游浏览器作为“基准广泛可用”的一部分进行定位，请指定 baseline widely available with downstream：
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream 是另一个有效查询，将 with downstream 添加到年度目标也是有效查询：
"browserslist": "baseline 2024 with downstream"
基准查询的实际应用示例
在打包工具中
在项目中使用 Browserslist 提供的基准查询可以立即生效。Babel 是一种常用的 JavaScript 打包构建工具。如果您使用 @babel/preset-env 软件包默认设置，许多现代 JavaScript API 和方法将被替换为旧版浏览器所需的更详细的语法：
不过，如果使用 baseline 2020 的查询来定位同一示例项目中的 2020 年功能集，则此 JavaScript 的输出大小会大幅减小，因为所需的语法转换更少：
您可以自行尝试，使用 Google Chrome Labs baseline-demos 代码库中的示例代码。
在 linter 中
有些 Linter 已经可以与 Browserslist 搭配使用，或者可以通过兼容性模块与 Browserslist 搭配使用。例如，stylelint 可以使用 stylelint-browser-compat 模块使用 browserslist 配置。将 stylelint.config.js 文件设置为使用您选择的基准查询：
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint 现在会标记目前不属于“Baseline 广泛可用”的 CSS：
Stylelint 还提供了一个插件，可让您直接设置基准规则，但如果您已使用 Browserslist 处理配置，则使用 Browserslist 提供的内置基准查询也是一种可行的解决方案。