browserslist

什么是 browserslist

browserslist在不同的前端工具之间共享配置目标浏览器环境的第三方工具。对于babel，postcss-autoprefixer，postcss-normalize这些工具来说都依赖browserslist的配置进行浏览器兼容适配。

配置方式

支持直接在package.json的browserslist字段中配置；优先级最高

  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]

同时也支持使用配置文件.browserslistrc；优先级次之

# Browsers that we support

defaults
not IE 11
maintained node versions

支持不同项目环境下的不同配置，常用development和production来区分，例如

module.exports = {
  development: ['last 1 version'],
  production: ['last 1 version', '> 1%', 'ie 10'],
};

规则

browserslist有以下配置项说明：

defaults：也就是> 0.5%, last 2 versions, Firefox ESR, not dead
> 5%：>，>=, < 或 <= 这些符号表示基于全球浏览器使用率统计数据进行的选择，例如> 5%也就是考虑浏览器市场份额至少在全球5%以上
cover 99.5%：浏览器的市场覆盖率达到99.5%
dead：浏览器官方更新已经停滞24个月以上，例如IE 10, IE_Mob 11
last 2 versions：永远支持浏览器最新的两个迭代版本，可以指定对应的浏览器，例如last 2 Chrome versions
node 10：nodejs 10.x版本
特定浏览器:
- iOS 7
- Firefox > 20
- ie 6-8
- Firefox ESR：firefox 拓展包
- PhantomJS 2.1：safari 特定版本
特定 JS 语法特性
- supports es6-module：支持 ES6 module，其他可用的语法特性可以从caniuse-lite/data/features获取
特定时间发布的浏览器版本
- since 2015
- last 2 years
支持测试版本的浏览器
- unreleased versions

配置项组合

browserslist的配置项支持使用以下形式的符号或者单词进行组合，它们之间的关系类似于集合

符号	适用范围	示例
`or`/`,`		`> .5% or last 2 versions` `> .5%, last 2 versions`
`and`		`> .5% and last 2 versions`
`not`	可用于任意规则，但是不能用于配置项开头	`> .5% and not last 2 versions`

浏览器列表

以下浏览器都被browserlist支持，并且配置时大小写不敏感

Android ：安卓 webview
Baidu
BlackBerry or bb
Chrome
ChromeAndroid or and_chr：chrome 安卓
Edge
Electron
Explorer or ie
ExplorerMobile or ie_mob
Firefox or ff
FirefoxAndroid or and_ff
iOS or ios_saf
Node
Opera
OperaMini or op_mini
OperaMobile or op_mob
QQAndroid or and_qq
Safari
Samsung
UCAndroid or and_uc
kaios

最佳实践

一般是设置不同开发环境的browserlist配置项，对于使用chrome开发，而生产环境需要兼容<IE 11的老破旧来说，一般在package.json中设置如下规则：

{
  "development": ["last 2 Chrome versions"],
  "production": [
    "last 1 version",
    "> 1%",
    "ie 10"
  ]
}

browserlist 更新

browserlist在2022-05-21更新中，将IE11列入不再维护的浏览器版本中，因为微软在2022-06-15起将正式不再维护 IE 浏览器，所以ie is dead.

那么此后使用browserlist设置> 0.5%, last 2 versions, not dead或者defaults的浏览器版本，将不再兼容IE11，这意味着部分依赖browserlist的开源工具，例如babel，webpack等可能会将代码编译成ES6版本。如果仍然要兼容IE11，那么需要明确指定IE11.

  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 11"
  ]

什么是 browserslist​

配置方式​

规则​

配置项组合​

浏览器列表​

最佳实践​

browserlist 更新​