Vue-cli4.x配置之：browserslist

Posted 2020-12-19 zheoneandonly

• browserslist简介与基本应用
• 如何配置browserslist
• browserslist配置如何作用于项目

 一、browserslist简介与基本应用

1.1browserslist是什么？

browserslist是用来配置项目的目标浏览器和nodejs版本范围，也就是通常说的兼容哪些浏览器的版本。

1.2browserslist配置存在何处？

如果所有配置信息都放到了package.json中的话就在配置信息中有这样一段配置，没有的话手动配置；

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

如果每个配置都被放到单独的一个文件中的话，创建完成的项目根目录下就会有这样一个文件.browserslistrc，其初始内容是这样的：

> 1%
last 2 versions
not dead

 1.3怎么查看browserslist配置兼容哪些浏览器？

在项目根目录下通过指令： npx browserslist 查询。

and_chr 84
and_ff 68
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
chrome 84
chrome 83
chrome 81
edge 84
edge 83
edge 18
firefox 78
firefox 77
ie 11
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 69
opera 68
safari 13.1
safari 13
samsung 12.0
samsung 11.1-11.2

上面示例配置兼容的浏览器列表

 二、如何配置browserslist

2.1browserslist的配置语句表达了什么？

>1%

基于全球使用率统计而选择的浏览器版本范围。>=，<，<=同样适用。

last 2 versions

最新的两个发行版本。

not dead

通过last 2 versions 筛选的浏览器版本中，全球使用率低于0.5%并且官方申明不再维护或者事实上已经两年没有在更新的版本，不再兼容这些版本。

 2.2browserslist配置依据？

从前面的配置语句中我们可以看到全球统计，那么browserslist依据的全球统计数据来源何处？

browserslist使用Can I Use网站的数据来查询浏览器版本范围，需要练习或者测试browserslist配置语句可以点击这里前往。

 2.3browserslist条件语句示例：

> 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。
> 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。
> 5% in alt-AS : 同上，只是使用地区变为亚洲所有国家。这里列举了所有的地区码。
> 5% in my stats : 使用定制的浏览器统计数据。
cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。
cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。
cover 99.5% in my stats :使用定制的浏览器统计数据。
maintained node versions :所有还被 node 基金会维护的 node 版本。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :当前被 browserslist 使用的 node 版本。
extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。
ios 7 :ios 7自带的浏览器。
Firefox ESR :最新的火狐 ESR（长期支持版） 版本的浏览器。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的两个发行版，包括所有的次版本号和补丁版本号变更的浏览器版本。
since 2015 or last 2 years :自某个时间以来更新的版本（也可以写的更具体since 2015-03或者since 2015-03-10）
dead :通过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
last 2 versions :每个浏览器最近的两个版本。
last 2 Chrome versions :chrome 浏览器最近的两个版本。
defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
not ie <= 8 : 浏览器范围的取反。
可以添加not在任和查询条件前面，表示取反

 2.4环境差异化配置：

package.json中配置

"browserslist": {
    "production": [
      "> 1%",
      "ie 10"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }

.browserslistrc中配置

[production staging]
> 1%
ie 10

[development]
last 1 chrome version
last 1 firefox version

 三、browserslist配置如何作用于项目

3.1查看browserslist配置兼容的浏览器和node版本：

在项目的根目录下执行该命令npx browserslist来查看配置筛选后的浏览器和node版本列表。

npx browserslist

3.2browserslist是在不同的前端工具之间共用目标浏览器和node版本的配置工具，它本身之提供兼容的浏览器和node配置数据，这些配置还需要基于其他的实际功能插件产生作用，比如为JS转码的babel等。

一些处理浏览器和node兼容的开发插件：

Autoprefixer
Babel
post-preset-env
eslint-plugin-compat
stylelint-unsupported-browser-features
postcss-normalize

 3.3browerslist衍生工具

• browserslit-ga： 该工具能生成访问你运营的网站的浏览器的版本分布数据，以便用于类似> 0.5% in my stats查询条件, 前提是你运营的网站部署有 Google Analytics。

• browserslist-useragent ： 检验 某浏览器的user-agent 字符串是否匹配 browserslist 给出的浏览器范围。

• browserslist-useragent-ruby ： 功能同上，ruby 库。

• caniuse-api： 返回支持指定特性的浏览器版本范围

• npx browserslist ：在前端工程目录下运行上面命令，输出当前工程的目标浏览器列表。