plugin-legacy 动态读取 .browserslistrc配置

前言

在前端开发中，为了确保一致和良好的用户体验，我们通常需要处理不同浏览器对 HTML、CSS 和 JavaScript 的支持差异。

在 Vite 生态中，我们通常使用 .browserslistrc 文件来统一管理目标浏览器范围。像 postcss-preset-env 这样的工具会自动读取它来进行 CSS 降级。然而，一个常见痛点是 @vitejs/plugin-legacy 插件的 modernTargets 选项并不会自动读取该文件，需要我们手动配置。

这就导致了同一个配置需要维护在两个地方：一份在 .browserslistrc 中给 PostCSS 使用，另一份在 vite.config.ts 中给 plugin-legacy 使用。这种重复不仅繁琐，还极易因忘记同步更新而出错。

本文将分享一个简洁的解决方案，通过代码实现配置的统一管理。

解决方案

我们的目标很明确：让 vite.config.ts 能够读取 .browserslistrc 文件的内容，并将其传递给 @vitejs/plugin-legacy 的 modernTargets 选项。

幸运的是，几乎所有处理浏览器列表的工具（包括 Vite、Webpack 和 PostCSS 插件）都依赖同一个核心库：browserslist。我们可以直接利用这个库来 programmatic地 读取配置。

1. 安装依赖

首先，我们需要在项目中安装 browserslist 作为开发依赖。

pnpm i browserslist -D

2. 修改 Vite 配置

// vite.config.ts
import legacy from "@vitejs/plugin-legacy";
import browserslist from "browserslist";

export default defineConfig(({ mode }) => {
  const cwdPath = process.cwd();

  return {
    plugins: [
      // 兼容性
      legacy({
        modernTargets: browserslist.loadConfig({ path: cwdPath }),
        renderLegacyChunks: false
      })
    ]
  }
})

代码解析：

• 我们使用 browserslist.loadConfig({ path: '.' }) 方法，它会自动在当前项目根目录（process.cwd()）下查找并解析 .browserslistrc 文件。
• 该方法返回一个字符串数组（string[]），其格式完全符合 modernTargets 选项的要求。
• 这样，modernTargets 的值就从硬编码的数组变成了动态读取的结果。

3. 创建 .browserslistrc 文件

如果在你的项目根目录还没有这个文件，请创建一个，并填入你的目标浏览器配置。

# .browserslistrc

# 更多规则请参考 browserslist 官方文档
# https://github.com/browserslist/browserslist

Chrome >= 61
Firefox >= 60
Safari >= 11
Edge >= 16
iOS >= 11

注意：Vite 底层的打包工具 esbuild 不支持将代码转换为 ES5。因此，即使你在 .browserslistrc 中设置了非常旧的浏览器（如 IE11），Vite 也无法生成完全兼容的 ES5 代码。这里的配置主要是为 @vitejs/plugin-legacy 和 PostCSS 提供统一的目标范围，确保语法转换和 Polyfill 的目标一致。

总结

通过在 vite.config.ts 中引入 browserslist 包，我们成功地让 @vitejs/plugin-legacy 插件动态读取了 .browserslistrc 文件的内容。

这种方法不仅优雅地解决了配置重复的问题，还确保了项目中所有与浏览器兼容性相关的工具（如 PostCSS）都使用同一份配置，真正实现了“单一数据源”（Single Source of Truth），大大提升了项目的可维护性和健壮性。