Vite+Browserslist适配旧浏览器遇阻：@vite/plugin-legacy配置无效？

你的问题核心在于默认配置未覆盖语法层面的小众兼容场景（比如Safari 15不支持的正则反向断言），以及模糊的Browserslist规则可能导致转译范围偏差。以下是具体修复方案：

1. 明确目标浏览器范围，避免模糊规则 #

cover 99.5% 这类规则可能因地区、统计数据源的差异，漏判需要兼容的浏览器版本。建议补充具体版本约束，确保转译规则精准覆盖目标：

// vite.config.ts
legacy({
  targets: [
    'cover 99.5%',
    'safari >= 15' // 明确指定需要兼容的Safari版本
  ],
  modernPolyfills: true,
  polyfills: true,
}),

2. 补充Babel插件处理正则断言语法 #

Safari 15不支持ES2018引入的正则反向断言（(?<!...)/(?<=...)），而@vite/plugin-legacy默认的Babel转译规则不包含这类语法的处理。需要额外安装并配置对应插件：
首先安装依赖：

npm install @babel/plugin-transform-regexp-assertions --save-dev

然后修改legacy配置，添加自定义Babel插件：

legacy({
  targets: [
    'cover 99.5%',
    'safari >= 15'
  ],
  modernPolyfills: true,
  polyfills: true,
  babel: {
    plugins: ['@babel/plugin-transform-regexp-assertions']
  }
}),

3. 确保第三方依赖被转译 #

如果不兼容的语法来自第三方依赖，Vite默认不会转译node_modules中的文件，需要手动配置开启转译：

export default defineConfig({
  // ...其他配置
  build: {
    commonjsOptions: {
      include: [/node_modules/] // 转译所有node_modules依赖
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020' // 预构建时采用更低的ES版本标准
    }
  }
})

4. 验证转译效果 #

• 用Browserslist命令确认目标浏览器范围：

npx browserslist "cover 99.5%"

• 构建后检查产物代码，确认正则断言已被转译为兼容语法。

针对你提到的「Vite是否无法轻松实现这类转译」：Vite完全可以做到，只是默认配置仅覆盖通用ES特性，对于正则断言这类细分语法，需要补充对应Babel插件；同时模糊的浏览器规则容易导致转译范围偏差，明确指定版本即可解决。

内容的提问来源于stack exchange，提问作者Theo Cerutti