Browserslist

924 阅读1分钟

是我参与11月更文挑战的第20天, 活动详情查看:2021最后一次更文挑战

browserslist 实际上就是声明了⼀段浏览器的集合,我们的⼯具可以根据这段集合描述,针对性的输出 兼容性代码。

Browserslist 就是帮助我们来设置⽬标浏览器的⼯具。Browserslist 被⼴泛的应⽤到 Babel、postcsspreset-env、autoprefixer 等开发⼯具上。

配置

Browserslist 的配置可以放在 package.json 中,也可以单独放在配置⽂件 .browserslistrc 中。所有的⼯具都会主动查找 browserslist 的配置⽂件,根据 browserslist 配置找出对应的⽬标浏览器集合。

Browserslist 的数据都是来⾃Can I Use:browserl.ist/ 可惜⽹站关闭了:现在需要⼿动检测:

npx browserslist "last 1 version, >1%"

在package.json 中的配置是增加一个 browserslist 文件:

{
    "browserslist": ["last 2 version", "> 1%", "maintained node version", "not ie < 11"]
}

或者在项目的根目录下创建一个.browserslistrc文件:

last 2 version > 1% 

maintained node versions 
not ie < 11
常见集合范围说明
范围说明
last 2 versionscaniuse.com⽹站跟踪的最新两个版本,假如 iOS 12 是最新版本,那么向后 兼容两个版本就是 iOS 11 和 iOS 12
> 1%全球超过 1%⼈使⽤的浏览器,类似 > 5% in US 则指代美国 5%以上⽤户
cover 99.5%覆盖 99.5%主流浏览器
unreleased versions说有浏览器的 beta 版本
not ie < 11排除 ie11 以下版本不兼容
since 2013 last 2 years某时间范围发布的所有浏览器版本
maintained node versions1所有被 node 基⾦会维护的 node 版本
current node1当前环境的 node 版本
dead通过 last 2 versions 筛选的浏览器中,全球使⽤率低于 0.5% 且官⽅声明 不在维护或者事实上已经两年没有再更新的版本
defaults默认配置, > 0.5% last 2 versions Firefox ESR not dead
浏览器名称列表(大小写不敏感)
  • Android :安卓 webview 浏览器;
  • Baidu : 百度浏览器;
  • BlackBerry / bb :⿊莓浏览器;
  • Chrome :chrome 浏览器;
  • ChromeAndroid / and_chr :chrome 安卓移动浏览器;
  • Edge :微软 Edge 浏览器;
  • Electron :Electron;
  • Explorer / ie :ie 浏览器;
  • ExplorerMobile / ie_mob :ie 移动浏览器;
  • Firefox / ff :⽕狐浏览器; * FirefoxAndroid / and_ff :⽕狐安卓浏览器;
  • iOS / ios_saf :iOS Safari 浏览器;
  • Node :nodejs;
  • Opera :opera 浏览器;
  • OperaMini / op_mini :operaMini 浏览器;
  • OperaMobile / op_mob :opera 移动浏览器;
  • QQAndroid / and_qq :QQ 安卓浏览器;
  • Samsung :三星浏览器;
  • Safari :桌⾯版本 Safari;
  • UCAndroid / and_uc :UC 安卓浏览器