# Browserslist

作者: 王振州时间: 2020-12-18

在开始 WEB 前端开发之前，我们需要明确目标环境。那么 Browserslist 就为我们提供了用于配置目标环境的方式, Browserslist 字段会被 @babel/preset-env 和 Autoprefixer 等用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀 Browserslist 的数据都是来自 Can I Use 的。如果你想知道配置语句的查询结果可以使用online demo

# 1 安装

npm install --save-dev browserslist

# 2 配置

Browserslist 的配置可以直接写在 package.json 的 browserslist 字段里（推荐），也可以写成名为.browserslistrc 的配置文件，但二者不能同时使用。

// package.json
{
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

1
2
3
4

# .browserslistrc
> 1%
last 2 versions
not ie <= 8

1
2
3
4

# 3 测试

在控制台执行下面的命令会输出当前的目标环境。

npx browserslist

输出

and_chr 75
and_ff 67
and_qq 1.2
and_uc 12.12
android 67
baidu 7.12
bb 10
bb 7
chrome 75
chrome 74
edge 18
edge 17
firefox 68
firefox 67
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 12.2-12.3
ios_saf 12.0-12.1
kaios 2.5
op_mini all
op_mob 46
op_mob 12.1
opera 62
opera 60
safari 12.1
safari 12
samsung 9.2
samsung 8.2

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
30

# 4 无配置

当 package.json 中不存在 browserslist 字段且.browserslistrc 也不存在时，相当于

// package.json
{
  "browserslist": ["defaults"]
}

1
2
3
4

# .browserslistrc
defaults

1
2

# 5 浏览器名称 + 版本号范围

{
"browserslist": ["ie > 8"]
}

{
"browserslist": ["ie 10-11"]
}

1
2
3
4
5
6
7

# 6 浏览器版本的市场份额 + 地区

{
  "browserslist": ["> 1% in CN"]
}

1
2
3

# 7 逻辑运算

# 7.1 或运算

,和or表示或运算（并集）

// “市场份额超过 1% 的浏览器版本”和“每种浏览器的最新 2 个版本”的并集。
{
"browserslist": ["> 1%, last 2 versions"]
}
{
"browserslist": ["> 1% or last 2 versions"]
}

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

1
2
3
4
5
6
7
8
9
10
11

# 7.2 与运算

and表示与运算（交集）

// “市场份额超过 1%的浏览器版本”和“每种浏览器的最新 2 个版本”的交集。
{
  "browserslist": ["> 1% and last 2 versions"]
}

1
2
3
4

# 7.3 非运算

not 表示非运算（补集）

注意：not 不能作为第一个条件。

// “市场份额超过 0.5%的浏览器版本”和“每种浏览器的最新 2 个版本”的差集
{
"browserslist": ["> .5% and not last 2 versions"]
}

{
"browserslist": ["> .5% or not last 2 versions"]
}

{
"browserslist": ["> .5%, not last 2 versions"]
}

{
"browserslist": ["> .5%", "not last 2 versions"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16