关于前端:处理cssjs兼容性的工具之超重要的browserslist

35次阅读

共计 998 个字符,预计需要花费 3 分钟才能阅读完成。

这篇 webpack 解决 css 资源 文章中应用到的工具 browserslist 对于兼容性解决来说十分重要!这一篇来认真说说。

查问兼容性

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

比方 css 中的 user-select 属性,用于规定是否能够在浏览器上双击选取或者高亮,在 ie 6-9 中不能够应用,在 ie10-11 中须要增加 -ms- 前缀。

也就是说,为了多浏览器兼容性解决,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 执行命令获取合乎规定的浏览器

如果是在我的项目中,有两种形式能够配置

  • 配置在 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%.

以上就是 browserslist 查找符合条件的浏览器版本和应用过程,更多无关 webpack 的内容能够参考我其它的博文,继续更新中~

正文完
 0