当前位置：首页 > article >正文

Browserslist 配置

article 2024/12/24 11:30:37

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

主要功能

兼容性管理: Browserslist 允许开发者指定要支持的浏览器及其版本，以确保生成的代码在目标浏览器上正常运行。
共享配置: 通过配置文件，开发团队可以确保所有开发者和工具使用相同的浏览器支持策略，从而减少因兼容性问题而导致的错误。
集成多种工具: Browserslist 被广泛集成在多个前端工具中，如 Babel、Autoprefixer、Stylelint 等，这些工具可以直接读取配置，以自动处理兼容性问题。

配置方式

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

在 package.json 中

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

在单独的 .browserslistrc 文件中

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

> 1%
last 2 versions
not dead

常用查询语法

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

示例

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

> 1%
last 2 versions
not dead

假设你希望为不同环境（生产和开发）配置支持不同的浏览器列表，
你可以在 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"
    ]
  }
```
或者在.browserslistrc 文件中写入：
```
[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，可以简化代码，避免为了支持该浏览器而做出的复杂调整。