Browserlist 使用指南：应对浏览器兼容性问题的解决方案

前言

在前端开发中，我们经常需要处理各种不同的浏览器兼容性问题。每个浏览器的版本众多，处理这些问题可能会让人感到头疼。幸运的是，有一个名为 Browserlist 的工具可以大大简化这项工作。本文将介绍 Browserlist 的作用和使用方法，并通过简单的示例帮助你快速上手。

什么是 Browserlist？

Browserlist 是一个配置文件，用于定义项目需要支持的浏览器及其版本。它与众多的前端工具集成，例如 Autoprefixer、Babel 和 ESLint，使得这些工具能够根据你指定的浏览器列表自动调整其行为。

为什么需要 Browserlist？

1. 减少代码体积：通过仅支持特定的浏览器版本，可以避免为不需要的浏览器增加额外的代码。
2. 提高开发效率：开发人员可以更专注于功能实现，而不需要花费大量时间处理浏览器兼容性问题。
3. 自动化工具集成：许多前端工具都可以根据 Browserlist 的配置自动调整输出，无需手动配置每一个工具。

如何使用 Browserlist？

安装

Browserlist 是一个 npm 包，可以通过以下命令来安装：

npm install browserlist --save-dev

配置

Browserlist 的配置可以放在多个地方，如 package.json 文件、.browserslistrc 配置文件或 browserslist 字段的环境变量中。这里我们以 package.json 为例：

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

配置选项解析

1. last 2 versions：支持每个浏览器的最后两个版本。
2. > 1%：支持市场占有率大于 1% 的浏览器。
3. not dead：不支持已停止更新和维护的浏览器。

高级配置

Browserlist 还支持环境配置，可以为不同的环境指定不同的浏览器列表。例如：

{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }
}

在上述配置中，production 环境下会支持市场占有率大于 0.2% 的浏览器，而 development 环境下则只支持最新的 Chrome 和 Firefox 版本。

实例：与 Autoprefixer 集成

Autoprefixer 是一个常用的工具，用于自动添加 CSS 前缀。它可以与 Browserlist 无缝集成：

npm install autoprefixer postcss --save-dev

然后在 postcss.config.js 中引入 Autoprefixer 并使用 Browserlist 配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

这样，Autoprefixer 会自动根据 Browserlist 配置为 CSS 添加相应的前缀。

Browserlist 配置规则详解

Browserlist 支持多种配置规则，可以灵活地根据项目需求选择合适的配置。下面将详细介绍其主要规则和用法。

基本规则

1. 版本选择：

   • last n versions：选择每个浏览器的最近 n 个版本。
   • last n Chrome versions：选择 Chrome 的最近 n 个版本。
   • last n Firefox versions：选择 Firefox 的最近 n 个版本。
   • last n major versions：选择每个浏览器的最近 n 个主版本。

2. 市场份额：

   • > 5%：选择市场占有率大于 5% 的浏览器。
   • > 1% in US：选择在美国市场占有率大于 1% 的浏览器。
   • > 2.5% in my stats：选择在自定义统计数据中市场占有率大于 2.5% 的浏览器。

3. 浏览器名称：

   • Chrome >= 80：选择版本大于或等于 80 的 Chrome 浏览器。
   • Firefox ESR：选择 Firefox 的长期支持版本。
   • iOS 7：选择 iOS 7 的浏览器。

4. 组合规则：

   • last 2 versions and > 1%：选择最近两个版本并且市场占有率大于 1% 的浏览器。
   • not IE 11：排除 IE 11 浏览器。
   • last 2 versions or > 5%：选择最近两个版本或市场占有率大于 5% 的浏览器。

环境变量配置

在不同的环境下（如开发环境和生产环境），我们可能需要支持不同的浏览器列表。Browserlist 支持通过环境变量配置：

{
  "browserslist": {
    "development": [
      "last 1 Chrome version",
      "last 1 Firefox version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

在使用时，可以通过设置 BROWSERSLIST_ENV 环境变量来指定使用的环境：

BROWSERSLIST_ENV=development npm run build

如果没有设置 BROWSERSLIST_ENV，Browserlist 会默认使用 production 环境。

Browserlist 与其他工具集成

与 Babel 集成

Babel 是一个广泛使用的 JavaScript 编译器，通过 Browserlist 可以更好地管理和优化 Babel 的编译目标。

首先，安装 Babel 和相关插件：

npm install @babel/core @babel/preset-env --save-dev

然后在 Babel 配置文件中使用 @babel/preset-env：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

Babel 会自动根据 Browserlist 配置，选择合适的编译目标。

与 ESLint 集成

ESLint 是一个流行的 JavaScript 代码质量工具，通过集成 Browserlist，可以更精确地配置代码检查规则。

首先，安装 ESLint 和相关插件：

npm install eslint eslint-plugin-compat --save-dev

然后在 ESLint 配置文件中添加 eslint-plugin-compat 插件：

{
  "plugins": ["compat"],
  "rules": {
    "compat/compat": "error"
  }
}

ESLint 会根据 Browserlist 配置，检查代码中不兼容的 API 使用。

使用统计数据

除了官方提供的浏览器市场占有率数据，Browserlist 还支持自定义统计数据。比如，你可以使用 Google Analytics 的数据来生成自定义的浏览器使用统计，并基于这些数据配置 Browserlist。

创建自定义统计数据

假设你已经从 Google Analytics 导出了浏览器使用统计数据，可以将其保存为 browserslist-stats.json 文件。然后在 package.json 中引用该文件：

{
  "browserslist": [
    "defaults",
    "not ie <= 8",
    "not op_mini all"
  ],
  "browserslist-stats.json": {
    "my custom stats": [
      "> 0.2% in my stats"
    ]
  }
}

你可以使用 npx browserslist --stats 命令查看当前配置支持的浏览器列表及自定义统计数据的应用情况。

总结

Browserlist 是一个强大的工具，它帮助前端开发人员简化了处理浏览器兼容性问题的工作。通过简单的配置，我们可以快速定义项目需要支持的浏览器列表，并与众多前端工具集成，从而提高开发效率和代码质量。如果你还没有使用过 Browserlist，不妨试试看，相信它会成为你项目中不可或缺的一部分。