如何让一个NPM包同时兼容Vite 2与Vite 5版本？

要实现插件同时兼容Vite 2和Vite 5，你可以从以下几个方面入手：

1. 调整peerDependencies版本范围 #

把package.json里的Vite依赖范围改成同时支持两个大版本：

"peerDependencies": {
  "vite": "^2.0.0 || ^5.0.0"
}

这种写法会告诉npm，插件可兼容Vite 2.x的所有子版本，以及Vite 5.x的所有子版本。

2. 代码层面做版本兼容检查 #

虽然你测试后插件在两个版本下能正常运行，但为了规避潜在的API差异风险，建议在插件代码里加入Vite版本判断，针对不同版本做适配（如果有需要的话）：

import { version } from 'vite';

export default function yourReplacePlugin() {
  const viteMajorVersion = parseInt(version.split('.')[0], 10);

  return {
    name: 'vite-plugin-replace',
    // 若钩子参数或行为存在差异，可根据版本分支处理
    transform(code, id) {
      if (viteMajorVersion === 2) {
        // Vite 2 专属逻辑
      } else if (viteMajorVersion === 5) {
        // Vite 5 专属逻辑
      }
      // 通用执行逻辑
      return code;
    }
  };
}

如果你的插件逻辑在两个版本下完全一致，这一步可以跳过，但保留判断逻辑能为后续版本兼容留有余地。

3. 完成双版本测试 #

提交PR前，务必在两种环境下验证插件功能：

• 搭建基于Vite 2的测试项目，安装插件后确认所有功能正常运行
• 搭建基于Vite 5的测试项目，重复上述验证步骤
  确保没有出现依赖冲突或功能异常的情况。

4. PR提交说明 #

给原仓库提交PR时，明确说明你的改动内容：

• 扩展了peerDependencies的Vite版本范围，同时支持Vite 2和Vite 5
• （若做了代码适配）添加了版本判断逻辑，保证不同Vite版本下的兼容性
• 已在两个版本的Vite项目中完成测试，功能正常

这样原作者能清晰了解你的修复方案，更容易接受PR。

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