我的前端配置之浏览器特性支持配置 browserlistrc

Question

简介

Browserslist 是一个前端项目配置工具，功能是在前端工具之间共享目标环境的浏览器信息。

为了更方便的配置不同工具之间对浏览器特性支持的配置，browserlist 应运而生。目前以下工具兼容 browserlist 的配置。

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

配置

可以将 browserslist 配置放在项目的 package.json 里，也可以放在单独的 browserslistrc 文件里，推荐独立文件。

项目根目录添加 .browserslistrc 文件：

# Browsers that we support

last 1 version
> 1%
not dead

这里使用 # 表示注释，使用换行表示多个目标浏览器匹配规则。上述三条规则表示的是：

• last 1 version: 即支持各类浏览器最近的一个版本，当然这里的 1 是可变的数字。
• > 1%: 支持市场份额大于 1% 的浏览器。
• not dead: not 是逻辑非操作符，即对 dead 取反，而浏览器被认为是 dead 条件是：最新的两个版本中发现其市场份额已经低于 0.5% 并且 24 个月内没有任务官方支持和更新了。

具体详细配置参考 官方最佳实践。