处理css/js兼容性的工具之超重要的browserslist

这篇 webpack处理css资源 文章中使用到的工具 browserslist 对于兼容性处理来说非常重要！这一篇来仔细说说。

查询兼容性

不同浏览器对于 css / js 的属性可能存在兼容性，具体可以通过 can i use 这个网站查询。

比如 css 中的 user-select 属性，用于规定是否可以在浏览器上双击选取或者高亮，在 ie 6-9 中不可以使用，在 ie10-11 中需要添加 -ms- 前缀。

1_can-i-use.png

也就是说，为了多浏览器兼容性处理，css代码可能要写成这样

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

而在项目中，可能存在兼容性的 css 或者 js 代码不止一个，而且需要兼容性的版本也无法列举完全，这时候需要通过工具来帮我们处理 ~

兼容性规则

browserslist 需要编写一些浏览器兼容条件，来告知 postcss 和 babel 分别以什么要求来对 css 和 js 代码进行兼容性编译。

常用的编写规则有这些

• default：Browserslist 的默认配置
  （ >0.5%, last 2 versions, Firefox ESR, not dead ）
• 5%：通过全局情况统计选择的浏览器版本，可以使用 >=，< 和 <=
• dead：24个月内没有官方支持或更新的浏览器
• last 2 versions：每个浏览器的最后两个版本

browserslist 是一个工具，可以直接通过 npx 执行命令获取符合规则的浏览器

2_npx-browserslist.png

如果是在项目中，有两种方式可以配置

• 配置在 package.json 中
• 配置在 .browserslistrc 文件中

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

// .browserslistrc
> 1%,
last 2 version,
not dead

编译过程

那 browserslist 又是去哪里查找浏览器使用占比和更新时间的呢，其实它最终使用的是caniuse-lite 这个工具来查询的，在 can i use - table 中可以查询到浏览器使用情况。

比如 chrome for Android 99版本的用户占比非常高，达到了 37.21%.

3_浏览器占比.png

以上就是 browserslist 查找符合条件的浏览器版本和使用过程， 更多有关webpack的内容可以参考我其它的博文，持续更新中~