Rsbuild 项目中的 Browserslist 配置指南

Rsbuild 项目中的 Browserslist 配置指南

【免费下载链接】rsbuild Unleash the power of Rspack with the out-of-the-box build tool. 项目地址: https://gitcode.com/gh_mirrors/rs/rsbuild

前言

在现代前端开发中，浏览器兼容性是一个永恒的话题。不同浏览器对 ECMAScript 和 CSS 的支持程度各不相同，如何优雅地处理这些兼容性问题成为了开发者必须面对的挑战。Rsbuild 作为一款现代化的构建工具，通过集成 Browserslist 标准，为我们提供了简洁高效的浏览器兼容性解决方案。

什么是 Browserslist

Browserslist 是一个用于指定项目目标浏览器范围的配置工具，它已经成为前端工具链中的事实标准。通过简单的查询语句，开发者可以声明项目需要支持的浏览器范围，然后各种构建工具（如 SWC、Lightning CSS、Babel、ESLint、PostCSS 等）会根据这个范围自动进行相应的代码转换和语法降级。

在 Rsbuild 中，Browserslist 配置直接影响以下两个方面：

1. JavaScript 和 CSS 的编译输出目标
2. 自动注入的 polyfill 代码量

Rsbuild 中的默认配置

Rsbuild 会根据不同的构建目标（output.target）自动设置合理的 Browserslist 默认值：

Web 目标

当构建目标为 web 时，默认支持以下现代浏览器：

chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

这个配置意味着构建输出将兼容支持原生 ES Modules 的浏览器，能够生成更精简高效的代码。

Node 目标

对于服务端渲染或 Node.js 应用（node 目标），Rsbuild 默认支持 Node.js 16.0 及以上版本：

node >= 16

Web Worker 目标

Web Worker 目标的默认配置与 Web 目标保持一致。

如何配置 Browserslist

Rsbuild 支持多种配置 Browserslist 的方式，开发者可以根据项目需求选择最合适的方式。

标准配置方式

推荐在项目根目录下创建 .browserslistrc 文件或是在 package.json 中添加 browserslist 字段：

// package.json
{
  "browserslist": [
    "iOS >= 9",
    "Android >= 4.4",
    "last 2 versions",
    "> 0.2%",
    "not dead"
  ]
}

或者使用单独的配置文件：

# .browserslistrc
iOS >= 9
Android >= 4.4
last 2 versions
> 0.2%
not dead

环境区分配置

在实际开发中，我们可能希望开发环境和生产环境使用不同的浏览器支持范围：

# .browserslistrc
[production]
chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

这种配置可以在开发时使用最新的浏览器特性提高开发效率，而在生产构建时保持更广泛的兼容性。

通过 Rsbuild 配置覆盖

Rsbuild 还提供了 output.overrideBrowserslist 配置项，可以直接在构建配置中设置 Browserslist：

export default {
  output: {
    overrideBrowserslist: [
      'iOS >= 9',
      'Android >= 4.4',
      'last 2 versions',
      '> 0.2%',
      'not dead',
    ],
  },
};

不过，除非有特殊需求，通常建议使用标准的 .browserslistrc 文件配置，因为这种方式更具通用性，能被更多工具识别。

Polyfill 自动注入

Rsbuild 可以根据 Browserslist 配置自动注入必要的 polyfill 代码。通过启用 output.polyfill 选项：

export default {
  output: {
    polyfill: 'usage',
  },
};

当设置为 'usage' 时，Rsbuild 会基于代码实际使用情况和目标浏览器支持情况，智能地按需注入 polyfill。例如，当需要兼容 IE11 时，会自动添加必要的 core-js polyfill。

常用配置方案

桌面端 Web 应用

如果需要兼容 IE11：

> 0.5%
not dead
IE 11

如果不需要兼容 IE11，可以使用更现代的配置：

chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

移动端 Web 应用

典型的移动端配置：

iOS >= 9
Android >= 4.4
last 2 versions
> 0.2%
not dead

如果希望使用 ES6+ 特性提升性能：

iOS >= 10
Chrome >= 51
> 0.5%
not dead
not op_mini all

浏览器特性查询

在实际开发中，我们经常需要查询某个特性在不同浏览器中的支持情况。可以使用 caniuse 等工具进行查询，了解哪些特性需要 polyfill 或降级处理。

最佳实践建议

1. 明确目标用户：根据实际用户群体选择合理的浏览器支持范围，避免过度兼容
2. 渐进式增强：优先支持现代浏览器，为老旧浏览器提供基础功能
3. 定期评估：随着时间推移，适时调整浏览器支持范围
4. 利用自动化工具：结合 CI/CD 进行浏览器兼容性测试

通过合理配置 Browserslist，开发者可以在浏览器兼容性和代码性能之间取得最佳平衡，Rsbuild 的这一集成使得这一过程变得更加简单高效。

【免费下载链接】rsbuild Unleash the power of Rspack with the out-of-the-box build tool. 项目地址: https://gitcode.com/gh_mirrors/rs/rsbuild