browserslist 是干什么的？

browserslist提供了配置你的项目是以哪些浏览器需要去兼容；在不同的前端工具之间共享目标浏览器和 Node.js 版本的配置。目前使用它的工具有：

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

使用

安装

npm i browserslist

在 package.json 中增加配置(也可以在文件.browserslistrc中配置)

"browserslist": [
  "defaults",
  "not IE 11",
  "not IE_Mob 11",
  "maintained node versions",
]

所有支持 browserslist 的组件，都将会自动找目标浏览器，然后生成对应的兼容代码。

一些常用的查询组合的含义

参数	价格
defaults	> 0.5%, last 2 versions, Firefox ESR, not dead
> 5%	全球超过 5%的人在使用的浏览器；同时支持>=、<、<=
> 5% in CN	在中国被超过 5%人使用的浏览器；双字符国家缩写
ie 6-8	版本在指定范围内的浏览器
Firefox > 20	版本号大于 20 的火狐浏览器
iOS 7	指定版本的浏览器
since 2013	2013 年后发布的所有版本
last 2 versions	每个浏览器最近的 2 个版本
last 2 Chrome versions	chrome 最近的 2 个版本
not ie <= 8	兼容大于版本 8 的 ie 浏览器
dead	官方不再支持或 24 个月内没更新的浏览器。目前有 IE 10、IE_Mob 10、黑莓 10、黑莓 7、三星 4 和 OperaMobile 12.1