Browserslist 配置说明

背景

Browserslist 定义了一套浏览器兼容配置标准,使得众多前端开发工具(Autoprefixer, Babel, Stylelint…)之间可以共享同一套配置。

查询标准

工具将从以下路径查询 browsers 配置:

  1. 当前目录或父级目录的 package.json 文件里的 browserslist 配置(推荐
  2. 组件自身配置项(比如,Autoprefixer 中的 browsers 配置项)
  3. BROWSERSLIST 环境变量
  4. 当前目录或父级目录的 browserslist 配置文件
  5. 当前目录或父级目录的 .browserslistrc 配置文件
  6. 如果以上配置均不能提供一个有效的配置,Browserslist 将采用默认配置:> 0.5%, last 2 versions, Firefox ESR, not dead

最佳实践

  1. last 2 Chrome versions 这种配置最好当你只想在对应的一个浏览器下开发 webapp,生产情况下最好不要,毕竟其他浏览器也有市场份额

  2. 如果你想自己配置,我建议你结合 last 1 version, not dead with > 0.2% (or > 1% in US, > 1% in my stats. last n version 会增加很过过时的浏览器并且没有增加流行的旧版本浏览器。> 0.2% 看起来更加合适(根据份额来定)

  3. 不要仅因为您不了解浏览器而删除浏览器。Opera Mini 在非洲拥有1亿用户,它在全球市场上比微软边缘更受欢迎。中文QQ浏览器的市场份额比 Firefox 和桌面 Safari 都要多。

基础语法

package.json:

1
2
3
4
5
6
7
8
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}

.browserslistrc:

1
2
3
4
5
6
# Browsers that we support

last 1 version
> 1%
maintained node versions
not dead

相关配置说明

例子 说明
> 1% 全球超过1%人使用的浏览器
> 5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
Firefox ESR 火狐最新版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 方向排除部分版本
Firefox 12.1 指定浏览器的兼容到指定版本
unreleased versions 所有浏览器的beta测试版本
unreleased Chrome versions 指定浏览器的测试版本
since 2013 2013年之后发布的所有版本

筛选后查询,验证:npx browserslist 打印出所有浏览器版本支出情况

参考资料: