Browserslist 是一个由社区维护的开源工具库，用于定义前端代码所需要支持的浏览器和其版本。它主要用于前端开发者希望对代码进行兼容性处理时，提供一个统一的浏览器支持范围描述。通过配置 Browserslist，开发者可以告诉相关工具，例如 Babel、Autoprefixer、ESLint 等，应该针对哪些浏览器生成代码或添加样式前缀。

Browserslist 的配置文件使用非常简单的文本语法，可以以配置文件的形式存在项目中，也可以在 package.json 中直接定义。由于前端开发过程中涉及到的工具和插件可能需要知道相同的浏览器兼容信息，所以 Browserslist 可以充当一个共享标准，确保项目中所有工具的目标浏览器配置保持一致。

这个工具在现代前端开发中非常普遍，因为当前 web 应用需要面对的设备种类和浏览器版本非常多。通过合理设置 Browserslist 配置，开发者可以控制代码的编译和打包，以减少不必要的 polyfill 和代码，使最终产物对目标用户更优化。下面将进一步探讨它的使用场景和细节。

Browserslist 的实际使用场景

前端工具的兼容性设置

Browserslist 在前端工具中的主要用途是用来确定目标浏览器范围，以便对代码进行适当的处理和转换。以下是几个常见的应用场景：

1. Babel 与 Browserslist 的集成

Babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转译为向后兼容的版本，从而可以在旧浏览器上运行。由于不同浏览器的特性支持不同，所以使用 Browserslist 配置，开发者可以让 Babel 自动判断需要将哪些新特性进行编译。

例如，如果您想确保代码可以运行在较老的浏览器中，可以在 Browserslist 配置中指定兼容性目标：

> 0.25%
not dead

这个配置的意思是支持全球市场中使用量超过 0.25% 的浏览器，同时排除那些已经停止维护的“dead”浏览器。这一配置会使 Babel 针对符合这些条件的浏览器编译代码，例如为不支持的浏览器添加 Promise 的 polyfill，或者将箭头函数转换为常规函数。

2. Autoprefixer 与 Browserslist 的集成

Autoprefixer 是 PostCSS 的一个插件，用于根据目标浏览器范围自动为 CSS 添加前缀。现代 CSS 特性需要不同的浏览器前缀，例如 -webkit-、-moz- 等，这些前缀可能对于旧版浏览器是必要的。手动为每个 CSS 属性加上不同的前缀既费时又容易出错，而 Browserslist 和 Autoprefixer 的结合使这个过程变得非常简单。

假如您有一个 CSS 代码：

div {
    display: flex;
}

在 Browserslist 配置为支持一些旧版浏览器时，Autoprefixer 会为您自动生成如下代码：

div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

这确保了在旧版本的 WebKit 浏览器（如 Safari 5.1）和 Microsoft 浏览器（如 IE 10）上也可以支持 flex 布局。

3. CSS 和 JavaScript 的 Tree Shaking

Tree Shaking 是一种通过删除未使用的代码来优化 JavaScript 或 CSS 打包输出大小的技术。通过与 Browserslist 的集成，打包工具（如 Webpack）可以只包含目标浏览器所需要的功能，剔除多余的 polyfill 和不必要的代码。例如，如果配置 Browserslist 以支持现代浏览器，打包工具会减少对一些过时特性的支持，从而减小代码体积。

4. PostCSS 的支持

PostCSS 是一个 CSS 处理工具，它可以通过插件实现各种功能，例如自动添加 CSS 前缀、变量处理等。PostCSS 可以直接读取 Browserslist 的配置，以确保其对 CSS 的处理满足目标浏览器的兼容性需求。这样可以保证项目中所有相关工具对目标浏览器的理解一致，从而减少因兼容性配置不一致而导致的 bug。

Browserslist 的配置和使用

Browserslist 的配置可以通过多种方式来实现。最常见的方式是使用 .browserslistrc 文件或直接在 package.json 中配置。

在 .browserslistrc 文件中配置

.browserslistrc 是一个专门用于定义 Browserslist 目标的文件，通常位于项目的根目录中，格式简单明了：

# Browsers that we support
> 1%
last 2 versions
not dead

这个文件的含义如下：

• > 1%：支持市场份额超过 1% 的浏览器。
• last 2 versions：支持各浏览器的最后两个版本。
• not dead：不支持那些已经停止维护的浏览器，例如 Internet Explorer 10。

在 package.json 中配置

Browserslist 也可以直接写在 package.json 中的 browserslist 字段内：

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在命令行中使用 Browserslist

开发者也可以在命令行中直接使用 Browserslist 来查看某些配置的覆盖范围。例如，如果想查看 > 1% 这个配置覆盖的浏览器，可以执行以下命令：

npx browserslist "> 1%"

该命令会列出满足条件的所有浏览器及其版本信息，这对于调试和理解配置的实际效果非常有帮助。

浏览器支持范围的定义与策略

Browserslist 提供了多种灵活的配置方式来帮助开发者定义目标浏览器的范围。以下是一些常见的配置和使用场景。

按市场份额配置

> 1% 是 Browserslist 中最常用的配置之一，这个配置表示支持全球市场中使用量超过 1% 的浏览器。这种配置方式比较适合那些需要兼顾大部分主流用户的项目，尤其是对市场份额要求较高的网站。

可以使用更具体的配置，来指定某些特定国家的浏览器份额：

> 1% in CN

这个配置表示支持中国市场份额超过 1% 的浏览器，这样可以针对特定地区进行优化。对于面向本地市场的产品，开发者可以根据当地用户的浏览器使用习惯进行调整。

按浏览器的版本进行配置

另一种配置方式是指定浏览器的具体版本，例如：

last 2 Chrome versions
last 1 Firefox versions

这种方式可以确保您的代码总是支持浏览器的最新版本。例如，如果希望项目中使用的特性始终是最新的，且兼容最近的两个主流版本，那么使用 last 2 versions 是一个很好的选择。

排除特定浏览器或特性

有时候需要排除某些特定浏览器或版本，可以通过 not 关键字来完成：

not IE 11
not Safari < 10

这个配置表示不支持 Internet Explorer 11 及更低版本的 Safari 浏览器。这种配置方式非常适合那些希望避免对一些老旧且性能较差的浏览器进行兼容的项目，例如现代化的 Web 应用程序。

结合 Browserslist 的其他工具和框架

与 React 的结合

在 React 项目中，Babel 和 Browserslist 常常结合使用，以确保编译的代码可以支持特定浏览器。例如，React 的应用通常使用 create-react-app 来创建。在这种情况下，create-react-app 默认包含了 Browserslist 的支持，开发者只需要配置目标浏览器，就可以让 Babel 根据目标浏览器自动调整编译策略。

以下是一个典型的 React 项目中 package.json 中的配置示例：

{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ]
}

这种配置确保了 React 项目代码对主流浏览器的兼容性，同时避免了对那些已经失去市场的浏览器（如 IE 10）的支持。

与 Vue.js 的结合

Vue.js 项目也可以利用 Browserslist 来确定目标浏览器的支持范围。例如，Vue CLI 默认支持 Browserslist 配置，开发者可以通过 package.json 文件来指定目标浏览器：

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 11"
  ]
}

在这种配置下，Vue 项目会避免对 IE 11 及以下版本进行兼容优化，使得打包输出的代码更加精简高效。

与 Angular 的结合

Angular 框架同样可以利用 Browserslist。Angular CLI 在创建项目时会生成一个默认的 .browserslistrc 文件，用于指定目标浏览器：

> 0.5%
last 2 versions
Firefox ESR
not dead

这个文件被 Angular 编译工具（例如 Angular Compiler）使用，以确定需要编译到的兼容性级别。通过合理配置 .browserslistrc 文件，可以显著降低打包的大小，并且提高应用的性能。

Browserslist 的优势

一致性和共享性

Browserslist 的最大优势之一就是它能够提供一致性和共享性。前端开发过程涉及到的工具种类繁多，比如 Babel、Autoprefixer、ESLint 等，这些工具都有可能需要知道项目中目标浏览器的范围。如果每个工具的配置不一致，会导致代码在不同的环境下表现不一致。

Browserslist 通过一个统一的配置文件，使项目中所有相关工具都能够引用相同的目标浏览器定义，从而保证了一致性。这种一致性不仅可以减少调试中的兼容性问题，也可以帮助团队成员更快地了解项目的兼容性策略。

动态市场份额数据

Browserslist 支持基于全球或某个地区的市场份额来配置浏览器范围，这使得开发者能够动态地调整目标浏览器的范围。通过市场数据的动态更新，开发者不必手动维护对每个浏览器版本的支持，而是可以自动依据市场趋势来做出判断。这对于大型项目，尤其是那些需要长期维护的项目非常有价值。

自动化处理与便捷性

通过与其他前端工具（如 Autoprefixer、Babel 等）的深度集成，Browserslist 帮助开发者大大简化了浏览器兼容性处理的工作。开发者不需要手动管理每个浏览器的特殊处理，而是可以通过简单的配置，自动化地完成这些任务。这不仅节省了时间，还减少了人为失误的可能性。

打包优化

通过精确指定目标浏览器的范围，Browserslist 可以帮助打包工具（如 Webpack）优化输出代码。例如，排除不必要的 polyfill，或是剔除已经不需要的代码路径。这种打包优化可以显著降低生成代码的大小，从而提升页面的加载速度和整体性能，最终提供更好的用户体验。

Browserslist 的常见问题与解决方案

配置覆盖问题

在一些复杂的项目中，可能存在多个 Browserslist 配置文件，例如在根目录有 .browserslistrc 文件，同时在 package.json 中也有配置。这个时候可能会遇到配置覆盖的问题。

Browserslist 使用一定的优先级规则来处理这些配置，通常遵循以下顺序：

1. 环境变量 BROWSERSLIST（如果有设置）
2. browserslist 配置文件
3. package.json 中的 browserslist 字段
4. 默认配置

如果遇到配置冲突的问题，可以考虑将配置集中到一个地方，通常推荐使用 .browserslistrc 文件，因为这样可以使配置更清晰和模块化。

浏览器版本的变化

浏览器的市场份额是不断变化的，例如某些老版本可能在一段时间内被大量用户抛弃。因此，在使用 Browserslist 时，建议定期查看并更新配置，以便确保项目的代码只针对当前市场中最有代表性的浏览器。

为了解决这个问题，可以使用 Browserslist 的查询功能，结合 npx browserslist 命令来定期查看当前配置所覆盖的浏览器和版本。

小结

Browserslist 是现代前端开发中不可或缺的工具，它通过提供一个统一的浏览器兼容性配置，帮助开发者与工具链之间保持一致，从而确保代码在目标浏览器中具有良好的兼容性。在具体的使用场景中，它被广泛应用于 Babel、Autoprefixer、ESLint、Webpack 等工具中，用于代码的编译、优化和兼容性处理。开发者通过合理配置 Browserslist，可以大大减少手动处理浏览器兼容性问题的负担，从而专注于核心业务逻辑的实现。

通过了解 Browserslist 的基本概念、配置方式以及在不同前端工具中的应用，开发者可以更有效地控制项目的浏览器支持范围，实现代码的最优化，从而为用户提供更好的体验。同时，定期维护和更新 Browserslist 配置也是保持项目长期稳定和高效的关键。