你真的了解 browserslist 吗？一文彻底搞懂

关于 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/ 这个网站来查看，你配置的内容具体支持的浏览器情况

1. 可以选择在全球、某个地区或某个国家/地区拥有超过或低于一定规模观众的版本
   • > 5% 全世界使用率大于5%
   • >= 5% in US 美国使用率大于等于5%
2. 选择最近的浏览器版本
   • last 2 versions 所有浏览器最新的2个版本
   • last 2 Chrome versions chrome 浏览器最新2个版本
3. 特定浏览器版本
   • Chrome > 100 chrome 浏览器版本大于100
   • not Firefox ESR 排除 Firefox ESR
4. 选择支持特定功能的浏览器版本
   • supports es6-module 支持 es6-module 的浏览器
   • supports css-grid 支持 css-grid 的浏览器
5. 以上条件可以组合
   • > 0.5%, last 2 versions 使用率大于0.5% 或者 所有浏览器最新2个版本（等价于 > 0.5% or last 2 versions）
   • > 0.5% and last 2 versions 使用率大于0.5% 的浏览器最新2个版本
6. 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 即可。