升级vite5注意事项

  1. Uncaught TypeError: (intermediate value).globEager is not a function

vite5中import.meta.globEager已经被废弃,改成使用import.meta.glob('*', { eager: true })

// 以前的使用方法
const routesModules = import.meta.globEager('../views/**/router/*.js');
// 现在的使用方法
const routesModules = import.meta.glob('../views/**/router/*.js', { eager: true });

2.  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.

废弃用 CJS 节点 API

Vite 的 CJS Node API 已弃用。调用时require('vite'),现在会记录弃用警告。您应该更新您的文件或框架以导入 Vite 的 ESM 版本。

在一个基础的Vite项目中,需要保证:

  1. 文件vite.config.js内容使用ESM语法。
  2. 最接近的package.json文件具有"type": "module",或使用.mjs扩展名,例如vite.config.mjs

对于其他项目,有一些通用方法:

  • 将 ESM 配置为默认值,如果需要,选择加入 CJS: 添加"type": "module"到项目中package.json。所有*.js文件现在都解释为 ESM,并且需要使用 ESM 语法。您可以使用扩展名重命名文件.cjs来继续使用 CJS。
  • 将 CJS 保留为默认值,如果需要,选择加入 ESM: 如果项目package.json没有"type": "module",则所有*.js文件都将解释为 CJS。您可以使用扩展名重命名文件.mjs以改用 ESM。
  • 动态导入Vite: 如果需要继续使用CJS,改为import('vite')可以使用动态导入Vite。这要求你的代码是在async上下文中编写的,但仍然应该易于管理,因为Vite的API大部分是异步的。
  • 在package.json中添加type:modle
 "type": "module",
  • 修改vite.config.jsvite.config.mjs
### 关于 ViteNode APICJS 构建被弃用的信息及替代方案 ViteNode API 中的 CommonJS (CJS) 构建已被标记为废弃状态[^1]。这意味着开发者应避免继续使用基于 CJS 的方式来引入 Vite 的功能模块,而转向更现代化的方式。 当项目配置文件 `vite.config.ts` 使用 TypeScript 编写,并且项目的 `package.json` 文件未定义 `"type"` 字段或者将其设置为 `"module"` 时,可能会触发此警告消息[^2]。这是因为默认情况下,Node.js 将 JavaScript 文件视为 CommonJS 模块,而在现代开发环境中推荐采用 ES Module (ESM) 方式。 #### 替代解决方案 为了应对这一变化并解决潜在问题,可以采取以下措施: 1. **更新至 ESM 导入语法** 推荐将导入语句改为支持 ES Modules 的形式。例如,在 TypeScript 配置中可以通过如下方式进行调整: ```javascript import { createServer } from 'vite'; ``` 这种方法不仅符合当前标准,还能够更好地与未来的版本兼容。 2. **修改 package.json 设置** 如果希望整个项目切换到纯 ESM 流程,则可以在根目录下的 `package.json` 添加或确认存在以下字段: ```json { "type": "module" } ``` 此操作会告知 Node.js 所有 `.js` 和 `.mjs` 文件均按照 ES Module 处理。 3. **保持向后兼容性(不建议长期依赖)** 对于某些特殊场景下仍需保留部分 CJS 支持的情况,可通过工具链额外处理实现过渡期平稳迁移;不过这通常不是官方鼓励的做法。 通过上述手段之一即可有效规避因 “The CJS build of Vite's Node API is deprecated” 警告带来的影响,同时也顺应技术发展趋势提升代码质量与可维护性。 ```typescript // 示例:TS 配合 ESM 的正确写法 import { defineConfig, loadEnv } from 'vite'; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { server: { port: Number(env.VITE_PORT), }, }; }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值