browserslist 是一个用于配置目标浏览器和 Node.js 版本的配置文件，广泛应用于前端工具链中，如 Babel、Autoprefixer、PostCSS 等。通过定义目标浏览器范围，开发者可以确保他们的代码能够在指定的浏览器环境中正常运行，同时避免不必要的兼容性处理，从而优化构建输出。本文将详细介绍 browserslist 的使用场景、配置方式、查询语法、实际应用以及*实践。
一、browserslist 的背景与作用
在前端开发中，浏览器的兼容性是一个不可忽视的问题。不同的浏览器对 JavaScript、CSS 和 HTML 的支持程度不同，开发者需要根据目标用户群体的浏览器使用情况，对代码进行兼容性处理。然而，过度兼容会导致代码冗余，增加构建体积，影响性能。
browserslist 的出现解决了这一问题。它允许开发者通过简单的配置文件或查询字符串，定义目标浏览器范围。前端工具会根据这些配置，自动调整代码的兼容性处理策略。例如：
Babel：根据目标浏览器范围，决定是否需要将 ES6+ 语法转换为 ES5。 Autoprefixer：根据目标浏览器范围，自动添加 CSS 前缀。 PostCSS：根据目标浏览器范围，优化 CSS 输出。通过 browserslist，开发者可以确保代码在目标浏览器中正常运行，同时避免不必要的兼容性处理，从而提高构建效率和代码质量。
二、browserslist 的配置方式
browserslist 的配置可以通过以下几种方式实现：
在 package.json 中配置 在 package.json 文件中添加 browserslist 字段，定义目标浏览器范围。例如：
{ "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }创建 .browserslistrc 文件 在项目根目录下创建 .browserslistrc 文件，每行定义一个查询条件。例如：
> 1% last 2 versions not dead在代码中动态配置 可以通过 browserslist 的 API 在代码中动态配置目标浏览器范围。例如：
const browserslist = require(browserslist); const browsers = browserslist(> 1%, last 2 versions, not dead);三、browserslist 的查询语法
browserslist 支持丰富的查询语法，以下是一些常用的查询条件：
市场份额
> 1%：选择全球使用率大于 1% 的浏览器。 > 5% in US：选择美国使用率大于 5% 的浏览器。浏览器版本
last 2 versions：选择每个浏览器的*两个版本。 Firefox > 50：选择 Firefox 版本大于 50 的浏览器。浏览器状态
not dead：排除已停止更新的浏览器。 unreleased versions：选择尚未正式发布的浏览器版本。特定浏览器
iOS 12：选择 iOS 12 的浏览器。 Chrome 80：选择 Chrome 80 的浏览器。自定义数据
extends browserslist-config-myconfig：使用自定义的 browserslist 配置。四、browserslist 的实际应用
以下是一些常见的应用场景：
Babel 配置 在 Babel 配置中，可以通过 browserslist 定义目标浏览器范围，从而决定是否需要转换 ES6+ 语法。例如：
{ "presets": [ ["@babel/preset-env", { "targets": "> 0.25%, not dead" }] ] }Autoprefixer 配置 在 PostCSS 配置中，可以通过 browserslist 定义目标浏览器范围，从而决定是否需要添加 CSS 前缀。例如：
module.exports = { plugins: [ require(autoprefixer)({ overrideBrowserslist: [> 1%, last 2 versions, not dead] }) ] };Webpack 配置 在 Webpack 配置中，可以通过 browserslist 定义目标浏览器范围，从而优化构建输出。例如：
module.exports = { module: { rules: [ { test: /.js$/, use: { loader: babel-loader, options: { presets: [@babel/preset-env] } } } ] } };五、browserslist 的*实践
根据用户群体配置 根据目标用户群体的浏览器使用情况，选择合适的查询条件。例如，如果目标用户主要使用*版本的 Chrome 和 Firefox，可以配置为 last 2 versions。
定期更新配置 浏览器的市场份额和版本更新较快，建议定期更新 browserslist 配置，以确保代码的兼容性。
避免过度兼容 过度兼容会导致代码冗余，增加构建体积。建议根据实际需求，选择合适的查询条件。
使用默认配置 如果没有特殊需求，可以使用默认配置，例如 defaults，它会自动选择全球使用率大于 0.5% 的浏览器。
测试兼容性 在发布前，使用工具（如 BrowserStack 或 Sauce Labs）测试代码在目标浏览器中的兼容性。
六、总结
browserslist 是一个强大的工具，通过简单的配置，可以帮助开发者优化代码的兼容性处理，提高构建效率和代码质量。无论是 Babel、Autoprefixer 还是 PostCSS，browserslist 都发挥着重要作用。通过合理配置和定期更新，开发者可以确保代码在目标浏览器中正常运行，同时避免不必要的兼容性处理。希望本文能够帮助你更好地理解和使用 browserslist，从而提升前端开发的效率和质量。