Browserslist 配置说明

2017/11/18 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 这种配置最好只在你想针对特定的一类浏览器下开发时使用,生产情况下不建议这么配置,毕竟市场上不单单只有这一种浏览器

  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亿用户,它在全球市场上比微软 Edge 更受欢迎。中文QQ浏览器的市场份额比 Firefox 和 Safari 都要多

# 基础语法

package.json:

{
    "browserslist": [
        "last 1 version",
        "> 1%",
        "maintained node versions",
        "not dead"
    ]
}

.browserslistrc:

# 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 打印出所有浏览器版本支持情况。

# 参考资料

上次更新: 2024/10/31 08:48:42