browserslist实际上就是声明了⼀段浏览器的集合,我们的⼯具可以根据这段集合描述,针对性的输出兼容性代码。
Browserslist就是帮助我们来设置⽬标浏览器的⼯具。Browserslist 被⼴泛的应⽤到 Babel、postcsspreset-env、autoprefixer 等开发⼯具上。
配置
Browserslist的配置可以放在package.json中,也可以单独放在配置⽂件.browserslistrc中。所有的⼯具都会主动查找browserslist的配置⽂件,根据 browserslist配置找出对应的⽬标浏览器集合。
Browserslist 的数据都是来⾃Can I Use:https://browserl.ist/
可惜⽹站关闭了,现在需要⼿动检测:
1 | npx browserslist "last 1 version, >1%" |
在package.json中的配置是增加⼀个browserslist数组属性:
1 | { |
或者在项⽬的根⽬录下创建⼀个.browserslistrc⽂件:
1 | # 注释是这样写的,以#号开头 |
常⻅集合范围说明
| 范围 | 说明 |
|---|---|
| last 2 versions | caniuse.com⽹站跟踪的最新两个版本,假如 iOS 12 是最新版本,那么向后兼容两个版本就是 iOS 11 和 iOS 12 |
| > 1% | 全球超过 1%⼈使⽤的浏览器,类似> 5% in US 则指代美国 5%以上⽤户 |
| cover 99.5% | 覆盖 99.5%主流浏览器 |
| chrome > 50 ie 6-8 | 指定某个浏览器版本范围 |
| unreleased versions | 所有浏览器的 beta 版本 |
| not ie < 11 | 排除 ie11 以下版本不兼容 |
| since 2013 last 2 years | 某时间范围发布的所有浏览器版本 |
| maintained node versions | 所有被 node 基⾦会维护的 node 版本 |
| current node | 当前环境的 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 安卓浏览器 |