Skip to content

作用

配置当前项目面向的平台,可以帮助babel、postcss识别出当前内容中哪些是需要转换

配置

支持字符串和对象的配置防范,对于字符串的配置可以使用npx browserlist string 检查字符串配置是否有效。 "," 表示并集 and表示交集

browserslist webpack插件

需求

  1. 页面加载时判断当前浏览器是否在兼容列表中,如果不存在,提示浏览器版本过低
  2. 离线判断,判断编译到代码中
  3. 打包时如果使用的浏览器是低版本,用户的浏览器高于高于这个版本处理。
  4. 如果webpack打包的环境不具备联网功能,需要支持手动上传查询文件功能

技术预研

  1. 离线判断需要编写webpack 插件,在生产打包时动态的查询然后将结果编译成chunk吗,并在入口文件中引用并提示。
  2. 不能在每个页面都做判断逻辑,能不能只判断依次,然后将结果缓存起来。

基于上面的逻辑找到了一个好东西 https://github.com/browserslist/browserslist-useragent-regexp,这个库可以根据配置生成 js 正则表达式,不过这个库的查询逻辑是自行实现的,不支持用户实现查询好浏览器后手动添加。

解决 browserslist-useragent-regexp 缺少的离线查询功能

原作者一直的更新,我们需要改动的只是 /src/browsers/browserslist.ts 中的getBrowsersList代码,新增从本地获取的逻辑。使用git action 每天定期的从原仓库拉取代码,如果有新的tag,将原始代码和本地代码混合, 重新打包发布新的。