关于 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 versions
chrome 浏览器最新2个版本Chrome > 100
chrome 浏览器版本大于100not Firefox ESR
排除 Firefox ESRsupports 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 即可。