关于 Browserslist 大家一定都不陌生，在现有前端工程都会有它的身影。Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。
- 你的工程中是否始终保持默认值，从未改写过？
- 你是否知道只需要几个参数，就可以改变你的工程所支持的浏览器情况（受众）？
- 你是否知道目前哪里浏览器是主流？哪些已经被弃用（或占有率很低）？
通过下述内容，我们一一解答。
配置方式：
在工程中使用 Browserslist 有两种常见方式：① 在 package.json 相应字段中增加；② 独立的 browserslistrc 文件
-
在
package.json中声明"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] -
通过
browserslistrc配置# Browsers that we support > 1% last 2 versions not ie <= 8
两种方式没有差异，大家根据自己习惯或者各自团队规范进行管理即可。（我们采用的是单独文件方式）
受众浏览器选择：
如果你所负责的工程受众是固定的，或者说你们可以自由做主支撑哪些浏览器，那太幸运了，你可以跳过这节，直接根据特定浏览器配置即可。
但往往我们很难决定应该支持哪些浏览器？只最新 Chrome 版本？还是要都兼容包括 IE11？
caniuse-lite 和 Can I Use 可以提供相应的数据支撑，Browserslist 也是依据此数据。
市场占用了大于 0.3% 且持续维护的具体浏览器及版本。
我们可以发现了，>0.3%, and not dead 的浏览器占据了整个的 89.5%。
当然，你也可以根据地区来选择，如中国地区使用率大于 0.3%的
由于中国移动端普及率比较高，所以整体上面的整体覆盖率只有 79.5%，剩余的有众多各种 for Android 的浏览器版本。
如何配置？
通过上述方式，我们可以圈定我们也支持哪些浏览器及版本，接下来就是如果通过 browserslist 进行配置？
可以通过 https://browsersl.ist/ 这个网站来查看，你配置的内容具体支持的浏览器情况
- 可以选择在全球、某个地区或某个国家/地区拥有超过或低于一定规模观众的版本
> 5%全世界使用率大于5%>= 5% in US美国使用率大于等于5%
- 选择最近的浏览器版本
last 2 versions所有浏览器最新的2个版本last 2 Chrome versionschrome 浏览器最新2个版本
- 特定浏览器版本
Chrome > 100chrome 浏览器版本大于100not Firefox ESR排除 Firefox ESR
- 选择支持特定功能的浏览器版本
supports es6-module支持 es6-module 的浏览器supports css-grid支持 css-grid 的浏览器
- 以上条件可以组合
> 0.5%, last 2 versions使用率大于0.5% 或者 所有浏览器最新2个版本（等价于> 0.5% or last 2 versions）> 0.5% and last 2 versions使用率大于0.5% 的浏览器最新2个版本
defaults等价于> 0.5%, last 2 versions, Firefox ESR, not dead
了解了上述配置语法，配置完成后，你可以上述提到的 https://browsersl.ist/ 进行实时查看。除此，你也可以通过下述工具，来检测配置是否正确和支撑的具体浏览器版本。
如何检查配置是否正确？
$ npx browserslist-lint
missedNotDead The not dead query skipped when using last N versions query
✖ 1 problems
需要追加 not dead，但谨慎使用，其会过滤到不再支持的浏览器，如IE11
如何查看配置的内容，支撑哪些浏览器？
$ npx browserslist
and_chr 95
chrome 95
chrome 94
safari 15
safari 14.1
samsung 15.0
...
至此，你就可以通过简单的几行命令，来控制要支持的浏览器情况，剩下的就交给 browserslist 即可。