升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated.

news2024/9/17 7:33:23

🚀 作者主页：有来技术
🔥 开源项目： youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot
🌺 仓库主页： Gitee 💫 Github 💫 GitCode
💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正！

错误描述

vue3-element-admin 升级 Vite4 至 Vite5 后启动项目出现如下警告：

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

问题原因

Vite 官方弃用 CJS 说明： deprecate-cjs-node-api

解决方案

Vite 官方 Github 仓库下的 ISSUE：“The CJS build of Vite’s Node API is deprecated” when using a TS vite.config.ts and the package.json has no type

根据官方说明文档和 ISSUE 下的解决方案有两种：

解决方案一

package.json 添加 "type": "module"

默认情况下 Node.js 默认将 .js 文件作为 CommonJS (CJS) 模块来处理。
当将 “type”: “module” 添加到 package.json 中，Node.js 会将 .js 文件作为 ECMAScript Modules (ESM) 来处理。

解决方案二

将 vite.config.ts 文件改名为 vite.config.mts

文件扩展名 .mts 明确地指示 Node.js 将该文件作为一个 ECMAScript Module (ESM) 来处理。
这与在 package.json 中设置 “type”: “module” 相类似，都是为了确保 Node.js 以 ESM 格式解析和执行模块。

问题扩展

CommonJS (CJS) 和 ECMAScript Modules (ESM) 是两种不同的 JavaScript 模块化标准，它们在语法和功能上有一些关键区别。。

什么是 CJS？

主要用途：最初设计用于 Node.js。
导出模块：使用 module.exports 或 exports。
导入模块：使用 require() 函数。
加载方式：同步加载，适合服务端。

示例：

// CJS 导出
// math.js
function add(a, b) {
    return a + b;
}
module.exports = { add };

// CJS 导入
// main.js
const math = require('./math.js');
console.log(math.add(2, 3));  // 输出 5

什么是 ESM?

主要用途：作为 JavaScript 的官方标准，用于浏览器和现代 Node.js。
导出模块：使用 export 关键字。
导入模块：使用 import 语句。
加载方式：可以是异步的，适合服务端和客户端。

示例：

// ESM 导出
// math.js
export function add(a, b) {
    return a + b;
}

// ESM 导入
// main.js
import { add } from './math.js';
console.log(add(2, 3));  // 输出 5