博客
0%

关于browserslist的一点学习

Posted on

什么是browserslist

browserslist是一个配置工具，通过配置查询条件可以筛选出内置数据库 caniuse-lite里的符合条件的浏览器版本，对于需要做兼容性适配的项目来说，是一个非常有用的工具，browserslist通常搭配babel来使用，在得到需要兼容的浏览器版本后，babel会计算出最合适的垫片用来转译目标浏览器不支持的es6语法

如何配置

通常可以直接在package.json中增加一个字段

1
2
3
4
5
6
7
8
{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

或者在项目根路径创建.browserslistrc文件

1
2
3
4
last 1 version
> 1%
maintained node versions
not dead

last 1 version 表示最新的1个版本

> 1% 表示使用率超过1%

maintained node versions表示官方还在维护的node版本

not dead表示官方还在维护

  • 如果开发者没有指定配置，browserslist会使用默认配置

查看浏览器列表

在项目路径下执行npx borserslist可以得到配置文件中的查询条件在caniuse-lite库中查询后的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
and_chr 114
and_ff 113
and_qq 13.1
and_uc 13.4
android 114
baidu 13.18
chrome 114
chrome 113
chrome 112
chrome 109
edge 114
edge 113
edge 112
firefox 114
firefox 113
ie 11
ios_saf 16.5
ios_saf 16.4
ios_saf 16.3
ios_saf 16.1
kaios 3.0-3.1
op_mini all
op_mob 73
opera 99
opera 98
safari 16.5
safari 16.4
samsung 21
samsung 20

有什么问题

如果没有设置配置文件，或者配置文件采用> 1%这种写法，随着项目越来越久，会因为一个意料外的问题，假设我们的项目是诞生于2020年，那时npm i browserslist后在package.json中的版本是^4.5.0，这个版本的browserslist内置的caniuse-lite库也是一个适配的版本，这个时候> 1%的语法查询出来的最低的chrome支持版本可能是109，但是2023年某一次删除node_modules和package-lock.json后再npm install后，根据package.json中的^4.5.0安装得到的browserslist依赖的版本可能是4.6.0，那么对应的caniuse-lite库也得到了更新，所以查询出来的chrome最低支持版本上升到了112，也就是说2年过去了，chrome支持的最低版本从109上升到了112，那么就会产生一个严重的问题：我们的项目必须要支持109，但是现在查询得到112，那么babel就不会再转移109不支持的语法，导致109实质上被放弃支持，这与我们的初衷有所背离。

怎么解决

所以，如果项目有明确的指出需要支持什么样的浏览器的最低版本，一定要在browserslist配置里明确的写出，比如：

1
chrome >= 109

那么未来不管caniuse-lite数据库怎么更新，这个项目都会支持到109的chrome版本。