概述
简单来说，browserslist 就是一个用特定语句查询浏览器列表的工具，比如：
# 查询 Chrome 最后的两个版本
npx browserslist "last 2 Chrome versions"
chrome 96
chrome 95
# 查询全球市场占有率大于 10% 的浏览器
npx browserslist "> 10%"
and_chr 96
chrome 95
常见查询语法
本文只列出常见的查询语法，完整列表请查看：github.com/browserslis…
defaults
# 默认配置，相当于 > 0.5%, last 2 versions, Firefox ESR, not dead
npx browserslist "defaults"
and_chr 96
and_ff 94
and_qq 10.4
...
按市场占有率
# 全球市场占有率大于 5% 的浏览器
npx browserslist "> 5%"
# 全球市场占有率小于 5% 的浏览器
npx browserslist "< 5%"
# 查找 USA 地区市场占有率大于 5% 的浏览器
npx browserslist "> 5% in US"
# 查找 Asia 地区市场占有率大于 5% 的浏览器
npx browserslist "> 5% in alt-AS"
按最后版本
# 查找所有浏览器的最后 2 个版本
npx browserslist "last 2 versions"
# 查找 Chrome 浏览器的最后 2 个版本
npx browserslist "last 2 Chrome versions"
dead
# 查找超过 24 个月没被官方维护的浏览器，比如 IE10、BlackBerry 10 等
npx browserslist "dead"
按浏览器版本
# 查找 ios 7 系统使用的 safiri 的浏览器版本
npx browserslist "ios 7"
# 查找版本号大于 20 的所有 Firefox 的浏览器版本
npx browserslist "Firefox > 20"
# 按版本号范围查找
npx browserslist "Firefox 20-40"
# 查找 Firefox 的长期支持版本
npx browserslist "Firefox ESR"
supports es6-module
# 查找支持 es6 模块的浏览器
npx browserslist "supports es6-module"
组合查询
可通过 and、or、not 关键字进行组合查询。
and 为交集，每个条件相交的结果：
# 查找 Chrome 58 到 65 并且支持 es6-module 的版本，可以看到 Chrome 在 61 版本才开始支持 es6-module
npx browserslist "Chrome 58-65 and supports es6-module"
chrome 65
chrome 64
chrome 63
chrome 62
chrome 61
or 为并集，每个条件合并的结果：
# 查找 Chrome 与 Edge 大于 94 的版本
npx browserslist "Chrome > 94 or Edge > 94"
chrome 96
chrome 95
edge 96
edge 95
也可以用逗号代替 or：
# 等同于上述命令
npx browserslist "Chrome > 94,Edge > 94"
not 为非，取反：
npx browserslist "Chrome 58-65 and not supports es6-module"
chrome 60
chrome 59
chrome 58
配置文件
可以在根目录下创建 .browserslistrc 配置文件，然后在配置文件中编写查询条件。
.browserslistrc：
Chrome > 94
Edge > 94
npx browserslist
chrome 96
chrome 95
edge 96
edge 95
注意，配置文件中的换行表示 or。
caniuse-lite 与 caniuse-db
browserslist 是从 caniuse-lite 这个库中查询数据的，caniuse-lite 是 caniuse-db 的精简版本，对 caniuse-db 的数据按一定规则做了简化，减少了库的大小。
caniuse-db 则是 can i use 网站的数据源，提供了网站查询所需的所有数据，caniuse-db 发布时会同步发布 caniuse-lite。
由于它们都不属于线上数据库，使用时会将数据克隆至本地，所以可能会存在本地数据不是最新的情况，browserslist 提供了更新 caniuse-lite 的命令，可定期运行以获取最新数据：
npx browserslist@latest --update-db
作用
市面上有很多浏览器，每种浏览器又有不同的版本，所支持的环境各不相同，为了抹平它们之间的差异，于是出现了 Pollyfill 解决方案，Pollyfill 的作用是通过降级处理，让新的语法能够运行在其不被支持的浏览器环境中，常见的 Pollyfill 有 Babel、Autoprefixer 等。
以 Babel 为例，它是怎么判断项目是否需要做降级处理的呢，答案就是通过 browserslist 查询出需要支持的浏览器列表，然后根据这个列表来做判断。
用 Babel 验证一下，先安装 Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
创建 babel.config.json：
{
"presets": ["@babel/preset-env"]
}
创建 .browserslistrc：
chrome 96
创建 index.js：
const say = (msg) => {
console.log(msg)
}
say('hello')
运行 babel 编译命令：
./node_modules/.bin/babel index.js --out-dir lib
查看编译后的文件，发现并没有做降级处理，因为 chrome 96 本身就支持 const 和箭头函数：
"use strict";
const say = msg => {
console.log(msg);
};
say('hello');
修改 .browserslistrc 让其支持 ie9：
chrome 96
ie 9
运行编译命令后查看编译文件，发现已做降级处理：
"use strict";
var say = function say(msg) {
console.log(msg);
};
say('hello');
如果 .browserslistrc 包含版本较旧的浏览器，可能会增大打包文件的体积，因为一些 api 需要通过 Pollyfill 来实现，比如某些浏览器不支持 Promise，那么会在打包文件中注入 Promise 的补丁：
window.Promise = function () {}
而版本较新的浏览器本身就支持了 Promise，不需要打补丁。所以可以根据项目的实际情况适当的设置 .browserslistrc 以减小打包文件的体积。
