Vite项目中如何正确导入本地CommonJS模块的导出值

看起来你在Vite ESM项目里导入本地CommonJS模块时踩了好几个坑，我来帮你梳理清楚问题根源并给出可行的解决方案。

问题根源 #

Vite默认以ESM（ES模块）模式运行，而你的本地common模块是CommonJS格式，且通过file:../common引入的本地依赖，Vite默认不会像处理node_modules里的CJS包那样自动转译它，导致浏览器环境无法识别CJS的exports/module.exports语法——这就是你看到各种ReferenceError: Can't find variable: exports错误的核心原因。

解决方案 #

根据你是否有权修改common模块的代码，分两种情况处理：

情况1：你可以修改common模块的代码（最优解）

直接把CommonJS模块转换成ESM，这样Vite可以原生支持，不需要额外配置：

1. 在common文件夹的package.json中添加：

   "type": "module"
   

2. 修改common/index.js的导出语法：
   • 原CJS导出写法：exports.defaultData = yourData; 或 module.exports = { defaultData: yourData };
   • 改为ESM导出：export const defaultData = yourData;
3. 重启Vite开发服务器，之后就可以正常导入了：

   import { defaultData } from 'common';
   

情况2：无法修改common模块（只能保留CJS格式）

需要给Vite添加插件来转译本地CJS模块，步骤如下：

1. 安装vite-plugin-commonjs插件，它能把CommonJS模块转换成Vite兼容的ESM：

   npm install vite-plugin-commonjs --save-dev
   # 或 yarn add vite-plugin-commonjs -D
   

2. 修改Vite配置文件（vite.config.js/vite.config.ts）：

   import { defineConfig } from 'vite';
   import commonjs from 'vite-plugin-commonjs';
   
   export default defineConfig({
     plugins: [commonjs()],
     // 告诉Vite预优化这个本地依赖，避免开发时的转译延迟或错误
     optimizeDeps: {
       include: ['common'],
     },
   });
   

3. 重启Vite开发服务器，之后就可以用正常的导入方式获取defaultData了：

   // 命名导入（推荐）
   import { defaultData } from 'common';
   
   // 或者命名空间导入
   import * as commonPackage from 'common';
   const defaultData = commonPackage.defaultData;
   

为什么之前的方法都失败了？ #

• 直接导入/命名空间导入报错：Vite没有转译CJS的exports语法，浏览器环境原生不存在exports变量，导致执行报错。
• 动态导入报错：本质和上面一致，未转译的CJS代码在浏览器里无法运行，动态导入只是触发了这个未处理的模块代码执行。
• require失败：浏览器环境原生不支持CommonJS的require函数，Vite也不会默认在浏览器中注入require，因此直接使用必然报错。

额外注意事项 #

• 确保你的项目package.json中"common": "file:../common"的依赖配置正确。
• 每次修改Vite配置后，必须重启开发服务器，否则新配置不会生效。
• 如果common模块有嵌套的CommonJS依赖，vite-plugin-commonjs也会自动处理它们的转译。

内容来源于stack exchange