前端工程化工具系列（十）—— Browserslist：浏览器兼容性配置工具

Browserslist 是一个能够在不同的前端工具间共享目标浏览器的配置，各工具根据该配置进行代码转译等操作。
具体的这些前端工具为：Autoprefixer、Babel、postcss-preset-env、eslint-plugin-compat、stylelint-no-unsupported-browser-features、postcss-normalize、obsolete-webpack-plugin 等，他们会根据配置自动查找要兼容的所有目标浏览器或 Node.js 版本。

1 配置

在项目中添加 Browserslist，常用有两种方式(不能同时在 .browserslistrc 和 package.json 中配置，否则使用 Babel 转译的时候会报错)：

• 在 package.json 文件中增加 browserslist 节点，一般使用 defaults 即可：

{"private": true,"dependencies": {},"browserslist": ["defaults"]
}

如果要兼容 IE9 以上可以使用以下配置：

{"private": true,"dependencies": {},"browserslist": ["last 2 version","> 1%","ie > 8"]
}

• 在项目的根目录下添加 .browserslistrc 文件

1%
last 2 versions
ie > 8

2 查看当前项目支持的版本

• 运行命令：

pnpm dlx browserslist

如果只是在 babel.config. 文件中配置了 targets 是检测不出来的（会优先使用），因此建议使用在单独的 .browserslistrc 来设置。

• 使用 Can I Use 的来查询配置对应的具体浏览器或 Node.js 的版本：
  

2 结合 Babel&PostCSS

在安装 Babel 或者 PostCSS 等工具时，会自动读取配置，根据要兼容的浏览器版本自动编译。