[TOC] # 目标浏览器配置表 [`browserslist`](https://github.com/browserslist/browserslist)能在不同前端工具之间共享目标浏览器和 Node.js 版本的配置。 `browserslist`使用[caniuse-lite](https://www.npmjs.com/package/caniuse-lite)和[caniuse](https://caniuse.com/)进行查询。 ## 这个`browserslist`有什么用呢？ 根据提供的目标浏览器的环境来，智能添加 css 前缀，js 的 polyfill 垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。 ## 使用 browserslist 的组件 | 组件名 | 功能 | | --- | --- | | Autoprefixer | postcss 添加 css 前缀组件 | | @babel/preset-env | 编译预设环境 智能添加 polyfill 垫片代码 | | eslint-plugin-compat | | | stylelint-no-unsupported-browser-features | | | postcss-normalize | | | more... | ## 基础语法 只要`package.json`配置了`browserslist`对象，需要的组件将自动匹配到并使用，也可以配置到具体的组件参数上： ~~~ // package.json { ... "browserslist": [ // 注意：是一个数组对象 "> 1%", "last 2 versions" ] ... } ~~~ `last 2 versions`：CanIUse.com 追踪的 IE 最新版本为 11，向后兼容两个版本即为10、11 ## 设置语法 通过浏览器过滤的思路实现，默认是兼容所有最新版本 | 例子 | 说明 | | --- | --- | | `> 1%` | 全球超过1%人使用的浏览器 | | `> 5% in US` | 指定国家使用率覆盖 | | `last 2 versions` | 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本 | | `Firefox ESR` | 火狐最新版本 | | `Firefox > 20` | 指定浏览器的版本范围 | | `not ie <=8` | 方向排除部分版本 | | `Firefox 12.1` | 指定浏览器的兼容到指定版本 | | `unreleased versions` | 所有浏览器的beta测试版本 | | `unreleased Chrome versions` | 指定浏览器的测试版本 | | `since 2013` | 2013年之后发布的所有版本 | ## 验证 browserslist 那么我们如何知道这个配置都兼容是什么，官方也提供了查询。 例如我们有如下配置： ~~~json "browserslist": [ ">0.2%", "not dead", "not op_mini all" ] ~~~ 然后运行： ~~~bash npx browserslist # 打印出所有浏览器版本支出情况， ~~~ 这个配置的大概意思： * `>0.2%`：拥有至少 0.2% 全球市场份额的所有浏览器 * `not dead`：排除过去 24 个月内没有官方支持的浏览器 * `not op_mini all`排除 Opera Mini 浏览器 有兴趣的可以查看。[官网文档](https://github.com/browserslist/browserslist) # Refs [重新认识caniuse](https://zhuanlan.zhihu.com/p/59270927) [前端工程基础知识点--Browserslist (基于官方文档翻译）](https://juejin.im/post/5b8cff326fb9a019fd1474d6) https://www.jianshu.com/p/bd9cb7861b85