Appearance
作用
配置当前项目面向的平台,可以帮助babel、postcss识别出当前内容中哪些是需要转换
配置
支持字符串和对象的配置防范,对于字符串的配置可以使用npx browserlist string 检查字符串配置是否有效。 "," 表示并集 and表示交集
browserslist webpack插件
需求
- 页面加载时判断当前浏览器是否在兼容列表中,如果不存在,提示浏览器版本过低
- 离线判断,判断编译到代码中
- 打包时如果使用的浏览器是低版本,用户的浏览器高于高于这个版本处理。
- 如果webpack打包的环境不具备联网功能,需要支持手动上传查询文件功能
技术预研
- 离线判断需要编写webpack 插件,在生产打包时动态的查询然后将结果编译成chunk吗,并在入口文件中引用并提示。
- 不能在每个页面都做判断逻辑,能不能只判断依次,然后将结果缓存起来。
基于上面的逻辑找到了一个好东西 https://github.com/browserslist/browserslist-useragent-regexp,这个库可以根据配置生成 js 正则表达式,不过这个库的查询逻辑是自行实现的,不支持用户实现查询好浏览器后手动添加。
解决 browserslist-useragent-regexp 缺少的离线查询功能
原作者一直的更新,我们需要改动的只是 /src/browsers/browserslist.ts 中的getBrowsersList代码,新增从本地获取的逻辑。使用git action 每天定期的从原仓库拉取代码,如果有新的tag,将原始代码和本地代码混合, 重新打包发布新的。
