前言#

在 webpack 中，我们可以通过配置 babel、postcss 等工具来将 js、css 的高级语法兼容低版本浏览器。但为了让这些工具知道该将代码最低兼容到什么程度，我们需要来指定一个范围：应该兼容哪些平台。

在项目根目录下常能见到一个 .browserslistrc 文件，这个文件就用来实现这种功能。且当我们安装 webpack 时，也会同时安装一个 browserslist 包。

环境准备#

1
# 查看默认支持的浏览器
2
npm i browserslist -D

注：安装 webpack 时将会自动安装 browserslist，无需手动安装。

配置说明#

browserslistrc 有多个配置项，可以参考 browserslist 查看。这里仅列举常用配置。

• > 1%：占有率大于 1% 的浏览器。可以通过 Browser usage table 查看各版本浏览器占有率。
• dead：死掉的平台（24 个月没有更新的浏览器），使用 not 进行取反。
• last 2 versions：最新的两个版本
• default：> 占有率大于 0.5%、采用最新的两个版本、firefox、没有死掉

配置方式#

browserslist 有两种配置方式，配置文件 .browserslistrc 与 pockage.json 中配置。

其中 .browserslistrc 的优先级高于 package.json。

1
> 1%
2
last 2 versions
3
no dead

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

使用方式#

配置好 browserslist 后，使用 webpack 进行打包时将自动按照指定范围内的浏览器进行兼容。此时可用如下指令来查看修改配置后的兼容浏览器列表。

1
npx browserslist

此时 browserslist 配置为

1
>1%
2
last 2 versions
3
not dead

输出结果如下

1
and_chr 106
2
and_ff 105
3
and_qq 13.1
4
and_uc 13.4
5
android 106
6
chrome 106
7
chrome 105
8
chrome 104
9
edge 106
10
edge 105
11
firefox 105
12
firefox 104
13
ios_saf 16.0
14
ios_saf 15.6
15
ios_saf 15.5
16
kaios 2.5
17
op_mini all
18
op_mob 64
19
opera 91
20
opera 90
21
safari 16.0
22
safari 15.6
23
samsung 18.0
24
samsung 17.0

可用该指令来确认对 browserslist 的配置是否生效。