Vite 6 升级指南：CJS 和 ESM 的爱恨情仇

Vite 6 升级指南：CJS 和 ESM 的爱恨情仇

引用

CSDN

1.

https://m.blog.csdn.net/kaka_buka/article/details/146096342

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：谁更香？

我们先来看看这俩的基本区别。

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 的节奏，让你的项目跑得更快更顺畅！🚀

参考链接