Browserslist 配置

Browserslist 是一个工具和规范，用于定义和共享支持的浏览器列表，以便在前端开发中管理不同工具的兼容性。这些工具可以包括 Babel、Autoprefixer、ESLint 等，它们都可以使用 Browserslist 提供的配置来确定应支持哪些浏览器及其版本。

主要功能

1. 兼容性管理: Browserslist 允许开发者指定要支持的浏览器及其版本，以确保生成的代码在目标浏览器上正常运行。

2. 共享配置: 通过配置文件，开发团队可以确保所有开发者和工具使用相同的浏览器支持策略，从而减少因兼容性问题而导致的错误。

3. 集成多种工具: Browserslist 被广泛集成在多个前端工具中，如 Babel、Autoprefixer、Stylelint 等，这些工具可以直接读取配置，以自动处理兼容性问题。

配置方式

Browserslist 的配置可以放在多个地方：

1. 在 package.json 中

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

2. 在单独的 .browserslistrc 文件中

你可以在项目根目录创建一个名为 .browserslistrc 的文件，内容如下：

> 1%
last 2 versions
not dead

常用查询语法

• > 1%：支持使用市场份额大于 1% 的浏览器。
• last 2 versions：支持每个浏览器的最新两个版本。
• not dead：不支持已停止更新的浏览器。
• Firefox ESR：支持 Firefox 的扩展支持版本。
• iOS >= 12：支持所有版本号大于等于 12 的 iOS Safari。

示例

1. 假设你希望支持市场份额大于 1% 的浏览器，最近两个版本的所有浏览器，并且不支持已停止维护的浏览器，你可以在 .browserslistrc 文件中写入：

> 1%
last 2 versions
not dead

2. 假设你希望为不同环境（生产和开发）配置支持不同的浏览器列表 ，你可以在 package.json 文件中写入：

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

生产环境的配置项解释：

• >0.2%: 支持市场份额大于 0.2% 的浏览器。这意味着只要某个浏览器在市场上的使用率超过 0.2%，它就会被包括在支持列表中。

• not dead: 排除那些已停止维护或不再更新的浏览器。这确保了只支持活跃的、仍然在接收更新的浏览器。

• not op_mini all: 排除所有版本的 Opera Mini 浏览器。Opera Mini 采用不同的技术处理网页，可能不支持现代 CSS 和 JavaScript 特性，因此在生产环境中通常不需要支持它。

测试环境的配置项解释：

• last 1 chrome version: 只支持最新的 Chrome 浏览器版本。

• last 1 firefox version: 只支持最新的 Firefox 浏览器版本。

• last 1 safari version: 只支持最新的 Safari 浏览器版本。

生产环境 (production): 配置目标是确保应用在大多数现代浏览器中正常运行，同时排除过时和特定的不必要的浏览器（如 Opera Mini），保证用户能够获得良好的体验。

开发环境 (development): 配置目标是支持最新版本的主要浏览器，以便开发时能使用最新的功能和特性，同时避免对老版本的兼容性处理，从而提高开发效率。

这种配置方式使得在不同的开发和生产阶段，能够根据实际需要调整支持的浏览器范围，从而达到更好的兼容性和用户体验。

关于配置项not op_mini all的额外说明

在 Browserslist 配置中，not op_mini all 的意思是排除所有版本的 Opera Mini 浏览器。

• op_mini: 这是 Browserslist 中用于表示 Opera Mini 浏览器的标识符。
• all: 这个关键词指的是所有版本的 Opera Mini。

因此，not op_mini all 的效果是告知工具（如 Babel、Autoprefixer 等）在生成兼容代码时，忽略对 Opera Mini 浏览器的支持。这通常是因为 Opera Mini 采用了与现代浏览器不同的处理方式，可能不支持某些 CSS 或 JavaScript 特性，或其用户体验与其他浏览器存在较大差异。

使用 not op_mini all 适合于那些希望在支持主流现代浏览器的同时，排除对 Opera Mini 的兼容性处理的场景。这在移动优先或注重现代浏览器特性的项目中非常常见。通过排除 Opera Mini，可以简化代码，避免为了支持该浏览器而做出的复杂调整。

使用场景

1. CSS 自动添加前缀: 当使用 Autoprefixer 时，可以根据 Browserslist 的配置自动为 CSS 代码添加所需的浏览器前缀。

2. JavaScript 转译: Babel 可以根据 Browserslist 的配置决定是否转译某些 ES6+ 特性，以便在目标浏览器中正常运行。

3. 构建工具优化: 在使用 Webpack 或其他构建工具时，可以根据配置决定如何处理兼容性问题，从而提高构建效率。

总结

Browserslist 是一个用于管理和共享支持的浏览器列表的工具，它通过统一的配置方式，帮助开发者确保应用在不同浏览器中的兼容性。通过合理配置 Browserslist，开发团队可以减少因兼容性导致的问题，提高开发效率和代码质量。