Browserslist：前端浏览器兼容性配置指南

发布日期：2025年5月7日 | 最后更新：2025年9月17日

Browserslist 是前端开发中用于配置代码库需要支持的最低浏览器版本的主流工具。当开发者将 browserslist 查询语句添加到 package.json 文件（或 Browserslist 的其他配置位置，例如 .browserslistrc 文件）后，Browserslist 会公开一个受支持的最低浏览器版本列表。

该工具被广泛应用于以下常见的代码检查、填充和打包工具中：

• Autoprefixer
• 使用 @babel/preset-env 的 Babel
• 使用 postcss-preset-env 的 PostCSS
• 使用 eslint-plugin-compat 的 ESLint
• 使用 stylelint-no-unsupported-browser-features 的 Stylelint
• webpack

基准目标

采用基准（Baseline）策略时，需结合您的用户群体，决定应瞄准哪个基准功能集。

• Baseline Widely available：包含在所有核心基准浏览器集合中已完全支持超过30个月的所有Web功能。
• 基准年功能集（如 Baseline 2020）：包含在指定年份年底新近可用的所有功能。

根据用户群体的不同，您或许能直接以 Baseline Widely available 为目标，也可能需要瞄准一个较早的基准年。请利用分析工具或 RUM 工具来了解您的用户正在使用的浏览器版本。

如何设定 Baseline Newly 或 Widely available 为目标

Baseline 的支持已通过多个不同的查询语句集成到 Browserslist 中。若您希望以 Baseline Newly available 浏览器为目标，可以在 Browserslist 配置中指定 baseline newly available。

{
  ...
  "browserslist": [
    "baseline newly available"
  ]
  ...
}

同样，您也可以指定 baseline widely available 作为查询条件。

{
  ...
  "browserslist": [
    "baseline widely available"
  ]
  ...
}

如何设定基准年为目标

如果您希望以某个基准年功能集为目标，请在查询语句中指定年份。例如，要以 2024 年的功能集为目标，可以这样配置：

"browserslist": "baseline 2024"

可指定的年份范围是从 baseline 2015 到当前年份。

如何包含下游浏览器

Baseline 的核心浏览器集合包括 Chrome、Edge、Firefox 和 Safari。其他基于 Chromium 的浏览器，由于与 Chrome 和 Edge 共享相同的开源代码基础，理应支持与其 Chromium 版本相对应的功能集。

若要将这些浏览器包含在基准配置中，请在基准查询语句后追加 with downstream。例如，要将下游浏览器作为 Baseline Widely available 的一部分进行目标设定，可以这样配置：

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream 也是一个有效的查询语句。同样，您也可以为年度目标添加 with downstream。

"browserslist": "baseline 2024 with downstream"

Baseline 查询示例

打包工具

在项目中使用 Browserslist 提供的基准查询语句可以立即获得收益。Babel 是一个常用的 JavaScript 打包构建工具。如果使用 @babel/preset-env 包的默认配置，许多现代 JavaScript API 和方法会被转译成适用于旧版浏览器的、更为冗长的语法。

然而，如果在同一个示例项目中使用 baseline 2020 查询来瞄准 2020 功能集，由于所需的语法转换减少，生成的 JavaScript 输出文件大小会显著缩减。

您可以使用 Google Chrome Labs 的 baseline-demos 代码库中的示例代码来亲自尝试这一效果。

在代码检查器中的应用

一些代码检查器已经内置了对 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 Widely available 范围的 CSS 代码进行标记。

虽然 Stylelint 也提供了可直接配置基准规则的插件，但如果您已经使用 Browserslist 处理配置，那么直接利用其内置的基准查询语句会是更简洁高效的选择。