Browserslist 浏览器目标配置工具技术调研

Browserslist 是前端工具链中定义「目标浏览器范围」的共享配置标准，被 Autoprefixer、Babel、postcss-preset-env、eslint-plugin-compat 等读取，统一编译、polyfill 和兼容性检查的浏览器目标，是兼容性调试与构建策略的单一配置源。

一、 基本信息

二、 技术定位与简介

在 package.json 或 .browserslistrc 中声明查询：

last 2 versions
> 1%
not dead

工具链自动解析为具体浏览器版本列表，决定：

• 是否添加 CSS 前缀。
• 是否注入 JS polyfill。
• 是否对不支持的 API 报 lint 警告。

三、 快速上手安装说明

.browserslistrc

defaults
not IE 11

package.json

{
  "browserslist": [
    "extends @my-org/browserslist-config"
  ]
}

CLI 查询

npx browserslist
npx browserslist --coverage

与 Can I use 对齐

在 caniuse.com Settings 导入相同查询字符串。

四、 核心特性

• 丰富查询语法（last 2 Chrome versions、supports es6-module）。
• extends 共享组织配置包。
• browserslist-stats 自定义区域使用率。
• 多环境（production / development）不同配置。
• 与 Baseline 查询集成（新版本）。

五、 适用场景

适合：任何使用 PostCSS/Babel 的前端项目；monorepo 统一浏览器支持声明；CI 检查覆盖率。

不适合：运行时特性检测本身（需配合 polyfill 或条件加载）。

六、 技术亮点

一行配置驱动整条工具链；行业标准；与 Can I use 数据同源思路。

七、 技术局限与边界

1. 仅声明目标，不自动修复兼容性。
2. 配置错误会导致过度或不足 polyfill。
3. 需与产品数据驱动的用户浏览器统计校准。
4. 不涵盖 WebView 特殊版本需额外说明。

八、 生态地图

Autoprefixer、@babel/preset-env、postcss-preset-env、eslint-plugin-compat、Vite、Next.js。

九、 生态集成

Next.js/Vite 读取 browserslist；Tailwind 与 postcss 链；CI browserslist --coverage 报告。

十、 开发与工程化

组织级 @org/browserslist-config 包；文档说明支持的最低 Safari/Chrome；与 QA BrowserStack 矩阵一致。

十一、 性能与安全

过宽目标增加 polyfill 包体积；过窄导致用户浏览器故障；定期根据 analytics 更新。

十二、 技术对比

十三、 最佳实践

1. 用 analytics 数据校准 > 0.5% in my stats。
2. 明确 not dead 避免支持无安全更新浏览器。
3. monorepo 根目录单一 browserslist 配置。
4. PR 变更 browserslist 需 QA 签收。
5. 与 Can I use 联合评估新特性。

十四、 学习与社区资源

• 官方文档：https://github.com/browserslist/browserslist#readme
• browserslist.dev 交互查询器

十五、 总结

Browserslist 是 兼容性工程化的配置枢纽，应在项目初期明确并与 Can I use、云测真机矩阵保持一致。