总结不出更好的了, 感觉官方文档已经写得够清楚了, 翻译的不好, 请大家斧正
简介
browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具. 它主要被一下工具使用:
- Autoprefixer https://github.com/postCSS/autoprefixer
- Babel https://github.com/babel/babel/tree/master/packages/babel-preset-env
- post-preset-env https://github.com/jonathantneal/postcss-preset-env
- https://github.com/amilajack/eslint-plugin-compat
- stylelint-unsupported-browser-features https://github.com/ismay/stylelint-no-unsupported-browser-features
- https://github.com/jonathantneal/postcss-normalize
browserslist 示例 https://github.com/browserslist/browserslist-example 演示了上面列举的每个工具是如何使用 browserslist 的. 所有的工具将自动的查找当前工程规划的目标浏览器范围, 前提是你在前端工程的 package.json 里面增加如下配置:
- {
- "browserslist": [
- "last 1 version",
- "> 1%",
- "maintained node versions",
- "not dead"
- ]
- }
复制代码
或者在工程的根目录下存在. browerslistrc 配置文件 (内容如下):
- # 注释是这样写的, 以 #号开头
- last 1 version
- > 1%
- maintained node versions
- not dead
复制代码
开发者通过设置浏览器版本查询范围 (eg. last 2 versions), 使得开发者不用再频繁的手动更新浏览器版本. browserslist 使用 Can I Use http://caniuse.com/ 网站的数据来查询浏览器版本范围.
browserslist 提供在线的查询条件练习网站, 下面会用到, 点击 这里 http://browserl.ist/ 前往.
browerslist 衍生的工具
browserslit-ga
简介: 该工具能生成访问你运营的网站的浏览器的版本分布数据, 以便用于类似 > 0.5% in my stats 查询条件, 前提是你运营的网站部署有 Google Analyst.
browserslist-useragent
简介: 检验 某浏览器的 user-agent 字符串是否匹配 browserslist 给出的浏览器范围.
browserslist-useragent-ruby
简介: 功能同上, ruby 库.
caniuse-api
简介: 返回支持指定特性的浏览器版本范围
npx browserslist
在前端工程目录下运行上面命令, 输出当前工程的目标浏览器列表.
查询来源
browerslist 将使用如下配置文件限定的的浏览器和 node 版本范围:
工具 options, 例如 Autoprefixer 工具配置中的 browsers 属性.
BROWERSLIST 环境变量.
当前目录或者上级目录的 browserslist 配置文件.
当前目录或者上级目录的 browserslistrc 配置文件.
当前目录或者上级目录的 package.json 配置文件里面的 browserslist 配置项 (推荐).
如果上述的配置文件缺失或者其他因素导致未能生成有效的配置, browserslist 将使用默认配置
- > 0.5%, last 2 versions, Firefox ESR, not dead
- .
最佳实践
仅仅当你在特定浏览器上开发类似于信息亭之类的 web app 的时候, 才可以用类似
last 2 Chrome versions
的查询条件来锁定特别具体的浏览器品牌和版本. 市面上有各种各样的浏览器, 同时浏览器的版本碎片化也很严重, 如果你在开发一款通用的 webapp, 那就应该考虑浏览器多样性导致的兼容问题.
如果你不想用 browserslsit 的默认设置, 推荐使用 last 1 version, not dead 和 > 0.2%(或者 > 1% in US,> 1% in my stats). 仅仅使用 last n versions 将添加太多的废弃浏览器到工程里面来, 同时也并没有有效的覆盖那些占有率仍然很高的老版本浏览器. Just> 0.2% make popular browsers even more popular, so we will have a monopoly and stagnation, as we had with Internet Explorer 6(这里没懂啥意思, 才疏学浅见谅).
不移除某些浏览器, 是因为你不了解它们的分布. Opera mini 在非洲有一亿用户, 全球范围内, 它也比 微软的 Edge 浏览器更加流行. QQ 浏览器的使用量比桌面端的火狐和 Safari 浏览器加起来还多.
所有查询条件列表
你可以用如下查询条件来限定浏览器和 node 的版本范围 (大小写不敏感):
来源: https://juejin.im/post/5b8cff326fb9a019fd1474d6