browserslist翻译+理解

前言

目前在学习create-react-app，在其官方文档中看到了browserslist配置。以前开发vue项目的时候，也自己配置过。时间久了就忘了。现在重新学习一遍。

Browserslist的github地址

Browserslist的作用

在项目中添加了Browserslist配置的话，这些配置会把目标浏览器以及NodeJS版本分享给前端工具，前端工具就可以根据版本来做兼容处理等。Browserslist被应用在以下工具中：

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

这些工具通过Browserslist，知道了浏览器的版本，就会根据这个版本做相应的兼容处理。（我们都知道前端需要兼容的东西太多了，因为浏览器厂商太多了）

Browserslist本身也是一个工具，但是它是被其他工具所使用。单独使用Browserslist这个工具，对开发者而言，没有什么意义。

Browserslist的使用方法

以下使用的官方例子

添加配置到 package.json 中

 "browserslist": [
    "defaults",
    "not IE 11",
    "not IE_Mob 11",
    "maintained node versions",
  ]

单独写一个文件 .browserslistrc

# Browsers that we support

defaults
not IE 11
not IE_Mob 11
maintained node versions

开发者把配置了Browserslis之后，以上所说的那些工具，会自动设置目标浏览器所需要的配置。对开发人员来说非常方便，不需要考虑太多兼容性问题了。

配置选项的意义？

我们可以看到官方例子中，写了

defults
no IE 11
....

这些的意思是什么呢？

这时候我们打开一个网站，在这里，你就懂了。

browserlist会根据开发者给出的配置选项，去查询符合选项的浏览器有哪些，然后再把这些浏览器版本告诉前端工具

如何配置Browserslist

我们可以只设置一个default查询，这样对于大多数用户来说都是合理的

"browserslist": [
    "defaults"
  ]

defaults 的查询结果：

如果你想改变默认的defaults配置，官方推荐我们组合像 last 1 versions，not dead 和 > 0.2% 这样的配置
```
"browserslist": [
    ">0.2%",
     "not dead",
    "last 2 versions"
]
```
这个组合查询的意思是，筛选 最新两个版本、还存活着的、且用户比例大于0.2% 的浏览器

从筛选结果来看， 逗号分割的组合查询的结果是并集，而非交集

之所以要组合查询，而不单独使用>0.2%，是为了避免流行的浏览器越来越流行，避免出现当初IE6一样的垄断情况。（有竞争才有进步）
只有当你专门针对某个浏览器（如Chrome）时，才直接使用last 2 Chrome versions。如果不是针对某个浏览器，不要使用这种写法。我们应该尊重所有为用户体验努力的浏览器厂商。
不要因为你不认识某个浏览器，而把它从browerslist配置中去除。

查询的来源

Browserslist会从以下的配置中，根据配置来查询目标浏览器

package.json 中的 browerslist 这个key所对应的字段。这是官方推荐的方式
单独写一个 .browerslistrc 配置文件
单独写一个 browserslist 配置文件
BROWSERSLIST 环境变量
如果以上的方式没有产生合法的查询条件， Browserlist会使用 > 0.5%, last 2 versions, Firefox ESR, not dead

查询体的写法

做过数据库查询的同学都知道，有或、且、非这种查询，Browserslist支持这些查询方式。

或查询：使用 , 或 or 拼接查询条件。查询结果为并集。写法如:

```
> .5% or last 2 versions
```
```
> .5%, last 2 versions
```
以上两种写法的结果是完全一样的

且查询：使用 and 拼接查询条件，查询结果为交集。写法如：

```
> .5% and last 2 versions
```

非查询：使用 not 拼接查询条件。可以跟或查询、且查询组合。写法如：

```
> .5% and not last 2 versions
```
```
> .5% or not last 2 versions
```
```
> .5%, not last 2 versions
```

有个快速查询的小技巧：在终端命令行中，写查询条件

npx browserslist '> 0.2%, not IE 8'

查询例子

你可以指定查询浏览器和nodeJS版本：

defaults: 默认配置（>0.5%, last 2 versions,Firefox ESR, not dead）
>5%: 选择浏览器用户量大于5%的浏览器，也可以使用>=, < 和 <=
>5% in US: 针对美国用户
5% in my stats: 使用开发者自定义的用户数据
cover 99.5%: 覆盖最流行的浏览器
cover 99.5% in US：跟上面一样，针对美国用户
node 10 and node 10.4：选择最新的NodeJS 10.x.x 或 10.4.x版本
ie 6-8: 选择这个范围内的IE浏览器
IOS 7: 精确查询IOS 浏览器的7版本
等等。。。

更多例子可以查看Browserslist官网

纯手打。转载请贴原文地址。