Browserslist 基础

介绍

browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具，主要被以下工具使用：

• Autoprefixer
• Babel
• postcss-normalize
• eslint-plugin-compat

所有的工具将自动的查找当前工程规划的目标浏览器范围，前提在 package.json 中配置

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

或者在工程根目录下存在 .browserslistrc 配置文件

# 注释是这样写的，以#号开头
last 1 version
> 1%
maintained node versions
not dead

原理：通过正则查找 caniuse-lite 和 Can I Use 两个网站的数据

语法

根据用户份额:

• > 5%: 在全球用户份额大于 5% 的浏览器
• > 5% in CN: 在中国用户份额大于 5% 的浏览器

根据最新浏览器版本

• last 2 versions: 所有浏览器的最新两个版本
• last 2 Chrome versions: Chrome 浏览器的最新两个版本

不再维护的浏览器

• dead: 官方不在维护已过两年，比如 IE10

浏览器版本号

• Chrome > 90: Chrome 大于 90 版本号的浏览器
• not ie <= 8 : 浏览器范围的取反

默认配置

> 0.5%, last 2 versions, Firefox ESR, not dead

直接在工程目录下运行npx browserslist 来查看结果

环境的差异化配置

In package.json:

"browserslist": {
  "production": [
    "> 1%",
    "ie 10"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version"
  ]
}

In .browserslistrc config:

[production staging]
> 1%
ie 10

[development]
last 1 chrome version
last 1 firefox version
复制代码