Browserslist

不同浏览器支持特性的兼容性：

不同浏览器支持特性的兼容性：是指某些 CSS 特性、JS 语法等，有些浏览器支持，有些浏览器不支持。

目前解决这个兼容性问题非常简单，已经有工具可以自动帮助开发人员处理了。例如：autoprefixer 可以自动给 CSS 添加浏览器前缀，以兼容不同的浏览器；babel 可以对 JS 语法进行转换。

但是，并不需要给所有浏览器都做兼容性处理。因为某些浏览器可能市场占有率已经很低，几乎没有人再使用了，再针对它做兼容性处理，反而增加了项目的包体积。

可以在 https://caniuse.com/usage-table 网站中查看浏览器的市场占有率。

Browserslist：

Browserslist 是一个在不同的前端工具之间，共享目标浏览器和 node 版本配置的工具。用来告诉前端工具（例如：Autoprefixer、postcss-preset-env、Babel 等），需要适配哪些浏览器和 node 版本。

原理：

Browserslist 会根据编写的条件使用 caniuse-lite 工具去 caniuse 网站上查询可以匹配到哪些浏览器。

运行 npx browserslist ">1%, last 2 versions, not dead" 可以看到匹配到的浏览器。

安装：

安装 Webpack 时会自动安装 Browserslist。

配置文件：

在项目中使用 Autoprefixer、Babel、postcss-preset-env 等前端工具时，会自动去配置了 Browserslist 的地方查询需要适配哪些浏览器和 node 版本。

如果没有明确配置的话，会使用 default 默认值。

1. 在项目的根目录下创建 .browserslistrc 配置文件，直接编写条件。

   // 换行也表示或的关系
   ">1%"
   "last 2 versions"
   "not dead"
   

2. 也可以在 package.json 文件的 browserslist 属性下编写条件。

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

常用条件：

如果使用 or 或者 , 分割多个条件，则它们之间是或的关系；如果使用 and 分割多个条件，则它们之间是且的关系；如果使用 not，则代表取反。

1. defaults：Browserslist 的默认浏览器配置，>0.5%, last 2 versions, Firefox ESR, not dead。
2. >1%： 市场占用率大于 1% 的浏览器。可以使用 >、>=、=、<=、< 符号。
3. dead：24 个月内没有官方支持或更新的浏览器。
4. laset 2 versions：浏览器最新的两个版本。