你真的了解 browserslist 吗？一文彻底搞懂

瞅啥了瞅

关于 Browserslist 大家一定都不陌生，在现有前端工程都会有它的身影。Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。
你的工程中是否始终保持默认值，从未改写过？ 你是否知道只需要几个参数，就可以改变你的工程所支持的浏览器情况（受众）？ 你是否知道目前哪里浏览器是主流？哪些已经被弃用（或占有率很低）？
通过下述内容，我们一一解答。
配置方式：
在工程中使用 Browserslist  有两种常见方式：① 在 package.json 相应字段中增加；② 独立的 browserslistrc 文件

• 在 package.json 中声明
  

"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]

• 通过 browserslistrc 配置
  

# Browsers that we support
> 1%
last 2 versions
not ie <= 8两种方式没有差异，大家根据自己习惯或者各自团队规范进行管理即可。（我们采用的是单独文件方式）
受众浏览器选择：
如果你所负责的工程受众是固定的，或者说你们可以自由做主支撑哪些浏览器，那太幸运了，你可以跳过这节，直接根据特定浏览器配置即可。
但往往我们很难决定应该支持哪些浏览器？只最新 Chrome 版本？还是要都兼容包括 IE11？
caniuse-lite 和 Can I Use 可以提供相应的数据支撑，Browserslist 也是依据此数据。


市场占用了大于 0.3% 且持续维护的具体浏览器及版本。


我们可以发现了，>0.3%, and not dead 的浏览器占据了整个的 89.5%。
当然，你也可以根据地区来选择，如中国地区使用率大于 0.3%的


由于中国移动端普及率比较高，所以整体上面的整体覆盖率只有 79.5%，剩余的有众多各种 for Android 的浏览器版本。
如何配置？
通过上述方式，我们可以圈定我们也支持哪些浏览器及版本，接下来就是如果通过 browserslist 进行配置？

可以通过 https://browsersl.ist/ 这个网站来查看，你配置的内容具体支持的浏览器情况

• 可以选择在全球、某个地区或某个国家/地区拥有超过或低于一定规模观众的版本
  
  
  
  • > 5% 全世界使用率大于5%
    
  • >= 5% in US  美国使用率大于等于5%
    
  
  
• 选择最近的浏览器版本
  
  
  
  • last 2 versions  所有浏览器最新的2个版本
    
  • last 2 Chrome versions chrome 浏览器最新2个版本
    
  
  
• 特定浏览器版本
  
  
  
  • Chrome > 100  chrome 浏览器版本大于100
    
  • not Firefox ESR 排除 Firefox ESR
    
  
  
• 选择支持特定功能的浏览器版本
  
  
  
  • supports es6-module 支持 es6-module 的浏览器
    
  • supports css-grid 支持 css-grid 的浏览器
    
  
  
• 以上条件可以组合
  
  
  
  • > 0.5%, last 2 versions 使用率大于0.5% 或者 所有浏览器最新2个版本（等价于 > 0.5% or last 2 versions）
    
  • > 0.5% and last 2 versions 使用率大于0.5% 的浏览器最新2个版本
    
  
  
• defaults 等价于 > 0.5%, last 2 versions, Firefox ESR, not dead
  

了解了上述配置语法，配置完成后，你可以上述提到的 https://browsersl.ist/ 进行实时查看。除此，你也可以通过下述工具，来检测配置是否正确和支撑的具体浏览器版本。
如何检查配置是否正确？
$ npx browserslist-lint
​
missedNotDead  The not dead query skipped when using last N versions query
✖ 1 problems需要追加 not dead，但谨慎使用，其会过滤到不再支持的浏览器，如IE11


如何查看配置的内容，支撑哪些浏览器？
$ npx browserslist
​
and_chr 95
chrome 95
chrome 94
safari 15
safari 14.1
samsung 15.0
...至此，你就可以通过简单的几行命令，来控制要支持的浏览器情况，剩下的就交给 browserslist 即可。