browserslist详解 vue-cli搭建项目中browserslist的作用讲解 推荐！！！

浏览器兼容性

Q：开发中，浏览器的兼容性问题，我们应该如何去解决和处理？

（PS：这里的兼容性指的是针对不同的浏览器支持的特性（比如css特性、js语法）之间的兼容性）
比如一个css特性叫 user-select，用在不同的浏览器中需要加前缀。
但是自己手动添加特别麻烦，现在有一个工具 autoprefixer 可以自动帮我们加浏览器前缀（前端工程化）。

  1. div {
  2.   -webkit-user-select: none; /* Safari */
  3.   -ms-user-select: none; /* IE 10+ and Edge */
  4.   user-select: none; /* Standard syntax */
  5. }

:::info Q：css3 的属性为什么要带前缀 ？
因为css3很多属性还没有确定下来，标准规范还没有发布，许多浏览器支持的程度也不同，而且每个浏览器厂商同一个样式支持的写法也不同，所以要加前缀来达到各个浏览器兼容，将来统一了规范就不用写前缀了。 :::

我们知道市面上有大量的浏览器：有Chrome、Safari、IE等；它们的市场占有率是多少？我们要不要兼容它们呢？

其实，在很多的脚手架配置中，都能看到类似于这样的配置信息：
image.png

一个个的条件 ==》提供给工具，告诉这些工具，我的这个项目到底要适配哪些浏览器（项目支持哪些浏览器） 比如工具是autoprefixer 和 babel，

1% 市场占有率要大于1%的浏览器，如果>1%的浏览器都需要加前缀，你就帮我都加上；反之亦然。 但是每个浏览器的市场占有率是从何而来 ？

Q：浏览器适配在工程化中是如何做到的？

通过browerslist

npm下的一个安装包
image.png
作用：就是在你的项目中提供共享的浏览器支持信息。
比如我们项目构建的时候一般会用到babel，postCss等等，提供了对应的浏览器信息后，他们就会针对浏览器信息采取不同的编译策略。
数据来自 caniuse （一款前端兼容性自查工具）

使用方法
1）在 package.json 中配置

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

2）.browerslistrc 配置文件
image.png

为什么需要？
根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。

基础语法： 只要package.json配置了browserslist对象,需要的组件将自动匹配到并使用,也可以配置到具体的组件参数上

共享使用 browerslist 的插件们：

组件名 功能vv
Autoprefixer postcss添加css前缀组件
bable-preset-env 编译预设环境 智能添加polyfill垫片代码
postcss-normalize
等等……

很多工具，比如babel、postcss会依赖browerslist这个工具进行查询（查询浏览器）

搭配 Babel preset-env


Babel 使用preset-env预设定义js转换规则，preset-env会根据Browserslist配置设置转换的目标浏览器，根据目标浏览器添加相应的转换插件和polyfill。

搭配 postcss

语法：通过浏览器过滤的思路实现，默认是兼容所有最新版本
例子 说明
> 1% 全球超过1%人使用的浏览器
> 5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR 火狐最新版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 方向排除部分版本
Firefox 12.1 指定浏览器的兼容到指定版本
unreleased versions 所有浏览器的beta测试版本
unreleased Chrome versions 指定浏览器的测试版本
since 2013 2013年之后发布的所有版本


image.png
或者直接执行npx browerslist 它会直接在当前目录下查找.browerslistrc文件，读取里面的内容（条件）
image.png