同一项目中能否让TS Vite用ESM、TS Gulp使用CommonJS？

完全可以实现，两者的模块规范可以独立配置，互不影响，具体操作步骤如下：

• 第一步：保留根目录package.json中的"type": "module"配置，保证Vite相关代码默认按ESM规范处理，不改动原有Vite的运行逻辑。
• 第二步：单独配置Gulp的模块规则，两种方案二选一即可：
  • 方案A（目录隔离，更易维护）：
    • 新建gulp目录存放所有Gulp相关代码，在该目录下新建package.json，仅填写内容{"type": "commonjs"}，指定该目录下所有文件默认按CommonJS规范处理
    • 在gulp目录下新建tsconfig.gulp.json，配置示例如下：

      {
        "compilerOptions": {
          "target": "ES2020",
          "module": "CommonJS",
          "esModuleInterop": true,
          "skipLibCheck": true,
          "forceConsistentCasingInFileNames": true,
          "resolveJsonModule": true,
          "ts-node": {
            "esm": false
          }
        },
        "include": ["**/*.ts"]
      }
      

    • 将你的gulpfile.ts放到gulp目录下，所有Gulp相关的TypeScript代码都放在该目录内即可
  • 方案B（单文件配置，更轻便）：
    • 直接将Gulp配置文件重命名为gulpfile.cts，TypeScript会自动识别该文件按CommonJS规范编译，无需额外调整目录结构
• 第三步：安装必要依赖
  执行安装命令：npm i ts-node @types/gulp @types/node -D
• 第四步：配置Gulp运行脚本
  在根目录package.json的scripts中添加对应命令：
  • 用方案A的配置："gulp": "ts-node --project ./gulp/tsconfig.gulp.json ./gulp/gulpfile.ts"
  • 用方案B的配置："gulp": "gulp --gulpfile gulpfile.cts"
• 第五步：验证生效
  先运行Gulp任务确认可以正常执行，再运行Vite的开发、构建命令，确认两者互不干扰，均能正常工作。

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