前言

在 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。

.browserslistrc

配置文件 browserslistrc 被放在根目录下，内容示例如下

1
2
3

> 1%
last 2 versions
no dead

package.json

在 package.json 添加一个新属性 browserslist，内容如下

1
2
3
4
5
6
7

{
    "browserslist": [
        ">1%",
        "last 2 versions",
        "not dead"
    ]
}

使用方式

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

1

npx browserslist

此时 browserslist 配置为

1
2
3

>1%
last 2 versions
not dead

输出结果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

and_chr 106
and_ff 105
and_qq 13.1
and_uc 13.4
android 106
chrome 106
chrome 105
chrome 104
edge 106
edge 105
firefox 105
firefox 104
ios_saf 16.0
ios_saf 15.6
ios_saf 15.5
kaios 2.5
op_mini all
op_mob 64
opera 91
opera 90
safari 16.0
safari 15.6
samsung 18.0
samsung 17.0

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