# 背景
Browserslist 定义了一套浏览器兼容配置标准,使得众多前端开发工具(Autoprefixer, Babel, Stylelint...)之间可以共享同一套配置。
# 查询标准
工具将从以下路径查询 browsers 配置:
- 当前目录或父级目录的 package.json 文件里的 browserslist 配置(推荐)
- 组件自身配置项(比如,
Autoprefixer
中的browsers
配置项) BROWSERSLIST
环境变量- 当前目录或父级目录的
browserslist
配置文件 - 当前目录或父级目录的
.browserslistrc
配置文件 - 如果以上配置均不能提供一个有效的配置,Browserslist 将采用默认配置:
> 0.5%, last 2 versions, Firefox ESR, not dead
# 最佳实践
last 2 Chrome versions
这种配置最好只在你想针对特定的一类浏览器下开发时使用,生产情况下不建议这么配置,毕竟市场上不单单只有这一种浏览器如果你想自己配置,建议你结合
last 1 version, not dead with > 0.2% (or > 1% in US, > 1% in my stats
.last n version
会增加很多过时的浏览器并且没有增加流行的旧版本浏览器。> 0.2%
看起来更加合适(根据份额来定)不要仅因为不了解而删除相关配置。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
打印出所有浏览器版本支持情况。