Vite 6 升级指南：CJS 和 ESM 的爱恨情仇
Vite 6 升级指南：CJS 和 ESM 的爱恨情仇
前言：老朋友 CJS，新欢 ESM
说到 JavaScript 模块化，CJS 和 ESM 这俩货简直像是两代人的思维碰撞。前者是 Node.js 的老朋友，后者是前端新时代的宠儿。Vite 6 直接把 CJS 踢出了家门，独宠 ESM，让很多习惯了 require() 的老码农有点不知所措。
今天我们就来聊聊这俩模块规范的区别，以及如何在 Vite 6 的“强制迁移令”下，优雅地抛弃 CJS，投入 ESM 的怀抱。
Vite 6 变了！只认 ESM，不再兼容 CJS
Vite 6 彻底甩掉了 CJS 这个包袱，带来了几个关键的变化：
- Vite 6 只认 ESM，CJS 语法的
module.exports直接歇菜。 - 必须用
import/export，谁还用require()，谁就是在跟 Vite 6 作对。 - 插件系统全面拥抱 ESM，想写插件？那就老老实实改用
import。 - TypeScript 配置文件
tsconfig.config.json让 Vite 更好地解析 ESM。
好消息是，这些改动让前端环境更清爽、更高效。但坏消息是，如果你还停留在 CJS 时代，你得做点功课才能跟上节奏。
CJS vs ESM：谁更香？
我们先来看看这俩的基本区别。
| 特性 | CommonJS (CJS) | ECMAScript Modules (ESM) |
|---|---|---|
| 导入方式 | const x = require('module') | import x from 'module' |
| 导出方式 | module.exports = {...} | export default {...} 或 export const x = ... |
| 加载方式 | 同步 (require()) | 异步 (import()) |
| 适用环境 | 主要是 Node.js | 既能跑 Node.js 也能跑浏览器 |
CJS 示例：
// math.cjs
const add = (a, b) => a + b;
module.exports = { add };
// app.cjs
const math = require('./math.cjs');
console.log(math.add(5, 3));
ESM 示例：
// math.mjs
export const add = (a, b) => a + b;
// app.mjs
import { add } from './math.mjs';
console.log(add(5, 3));
一句话总结：CJS 适合老 Node.js 项目，ESM 适合所有现代 JavaScript 开发。
Vite 6 迁移指南：怎么抛弃 CJS？
1. 改造 vite.config.js
❌ 旧的 CJS 写法（Vite 5 及以前）：
const { defineConfig } = require('vite');
module.exports = defineConfig({});
✅ 新的 ESM 写法（Vite 6）：
import { defineConfig } from 'vite';
export default defineConfig({});
2. 更新 tsconfig.config.json
✅ 推荐配置（适配 Vite 6）：
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.ts", "vitest.config.ts"],
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "bundler"
}
}
3. 确保 ESLint 也是 ESM 版本
❌ 旧版（CJS 写法）：
module.exports = {
extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
};
✅ 新版（Vite 6 推荐 ESM 写法）：
export default {
extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
};
4. 彻底清理老旧依赖
有些 NPM 包可能仍然依赖 CJS，所以最好清理一下 node_modules：
rm -rf node_modules package-lock.json
npm install # 或 yarn install / pnpm install
然后启动项目，看看 Vite 6 还能不能跑：
npm run dev # 或 vite
结语：Vite 6 之后，ESM 终于上位！
如果说 CJS 是 JavaScript 模块化的“老干部”，那么 ESM 就是新时代的“带头大哥”。Vite 6 的升级彻底向前迈了一步，把 CJS 甩在了身后，给前端开发带来了更快的启动、更好的兼容性和更清爽的代码。
所以，与其挣扎着想办法让 CJS 继续活下去，不如早早投靠 ESM，跟上 Vite 6 的节奏，让你的项目跑得更快更顺畅！🚀
参考链接
- Vite 官方文档
- Node.js 官方文档 - ECMAScript Modules
- ES Modules 介绍 - MDN
