《Vite 基础知识》关于 .mjs .cjs 文件引出 NodeJS 对JS模块加载的思考（CommonJS 和 ESM）

最新推荐文章于 2025-10-11 11:00:27 发布
原创 最新推荐文章于 2025-10-11 11:00:27 发布 · 3.8k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CommonJS #ESM #Vite

本文介绍了在从Webpack/Vue2升级到Vite/Vue3过程中遇到的三个主要差异：Vitepress的config.mjs、Vite/Vue3项目的postcss.config.cjs后缀要求和package.json的type属性。这些差异主要围绕Node.js的CommonJS和ESM模块加载方式展开。

前言

学习 Webpack/Vue2 升级 Vite/Vue3 时，发现以下不同：

  1. 新建的 Vitepress 项目默认创建了 config.mjs 文件；

  2. 新建的 Vite/Vue3 项目，package.json 中默认加上 type: 'module' 配置；

  3. 新建的 Vite/Vue3 项目，postcss.config.cjs 文件后缀必须是 .cjs，否则报错；

其实它们是一个问题，Node.js 对 .js 文件的模块加载方式！

分析

先理清几个概念！！！

Node.js 的模块加载方法有两种：CommonJS 和 ES Modules（ES6/ESM，接下来都用简称 ESM ）

CommonJS 和 ESM 区别

功能 CommonJS ESM
导入/导出接口 require() 和 exports/module.exports import 和 export
输出 值的拷贝 值的引用
动态导入 不支持 支持
作用域 全局作用域 局部作用域
加载 运行时加载 编译时输出接口
同步/异步 require() 是同步加载模块 import 命令是异步加载模块
循环依赖 程序复杂时容易崩溃 可处理循环依赖，因为是静态作用域
浏览器兼容 支持现代浏览器，旧版不支持 更适用于早期 Node.js 环境
Node.js 支持 Node.js打包 JS 代码的原始方式 v8.5.0(2017.9.12) 开始支持
v13.2.0(2019.11.21) 开始默认支持

值得学习的参考链接

最低0.47元/天 解锁文章
升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated
xiangzhihong8的专栏
04-30 1万+
当将 “type”: “module” 添加到 package.json 中，Node.js 会将 .js 文件作为 ECMAScript Modules (ESM) 来处理。这与在 package.json 中设置 “type”: “module” 相类似，都是为了确保 Node.js 以 ESM 格式解析和执行模块。默认情况下 Node.js 默认将 .js 文件作为 CommonJS (CJS) 模块来处理。Vite 官方 Github 仓库下的 ISSUE：“
Node.js | 从前端到全栈的必经之路
热门推荐
前端之行，任重道远！
08-17 4万+
深入浅出Node.js，最适合前端开发人员进入全栈时学习的服务端语言，以JavaScript为基础，使前端人员能够平滑过渡到全栈，赶快来认识一下Node.js吧！
Vite配置完全手册：从基础到高级配置详解
gitblog_00615的博客
09-18 694
你是否还在为Webpack复杂的配置而头疼？是否在开发过程中忍受漫长的构建等待？Vite（法语意为"快速的"，发音为/vit/）作为下一代前端构建工具，正以其惊人的速度和简洁的配置重新定义前端开发体验。本文将带你全面掌握Vite的配置技巧，从基础设置到高级优化，让你的项目构建速度提升10倍以上。 读完本文，你将能够： - 快速搭建和配置Vite开发环境 - 掌握核心配置选项，优化开发体验 - 深...
.js、.mjs 和 .cjs 的区别
Gleason
10-11 456
在 Node.js 中，.js 文件默认被解析为 CommonJS 模块，除非在 package.json 中设置 “type”: “module”，此时会被解析为 ES 模块。模块类型：可以是 CommonJS 模块（CJS）或 ES 模块（ESM），具体取决于项目配置。适用场景：需要明确使用 CommonJS 模块的项目，或与旧版 Node.js 或工具兼容时。适用场景：需要明确使用 ES 模块的项目，尤其是在 Node.js 环境中。模块类型：专用于 CommonJS 模块（CJS）。
【Vue3项目实战系列一】—— vite.config.js配置文件详细说明
Sherry Tian的博客
12-12 958
本文以项目中的vite.config.js配置文件抛砖引玉介绍了vite的常用配置及其作用
深度剖析 Vite 配置文件
2301_79226238的博客
10-19 1342
因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。不过，后面 Vite 还会处理一些边界情况，在用户配置不合理的时候，给用户对应的提示。这里的逻辑稍微有点复杂，很难梳理清楚，所以我们不妨借助刚才梳理的配置解析流程，深入 loadConfigFromFile 的细节中，研究下 Vite 对于配置文件加载的实现思路。
解析后缀.js、.mjs和.cjs：JavaScript文件类型的区别与使用
有事儿私信。
12-14 1万+
通过对.js、.mjs和.cjs三种JavaScript文件类型的解析，我们可以发现它们各自具有不同的特点和适用场景。在实际开发中，我们应该根据项目需求和目标环境选择合适的文件类型。同时，为了确保代码的可维护性和可读性，我们还应遵循良好的编码规范和命名约定。
深入探究.js、.mjs 和.cjs 文件扩展名的区别
qq_48131648的博客
01-15 1686
js文件可以根据中的"type"字段被解析为 CommonJS 或 ES 模块，具有一定的灵活性，但也可能带来混淆。.mjs文件明确表示为 ES 模块，使用import和export关键字，适用于现代 JavaScript 开发，尤其是在需要使用 ES 模块特性的场景。.cjs文件则明确为 CommonJS 模块，在以 ES 模块为主的项目中，用于兼容旧的库或模块。在实际开发中，我们需要根据项目的需求、模块的类型以及与其他库的兼容性，合理选择使用.js.mjs和.cjs文件扩展名。
Node.js中ES模块的实践与代码示例解析
许多NPM包同时提供两种格式（通过`exports`字段精确控制），工具链（如Webpack、Vite、Rollup）需处理互操作问题（如`require()`加载ESM模块需使用`createRequire`），而Node.js自身也在不断完善跨模块系统的边界...
E:\p\jeecgboot-vue3>npm run dev > jeecgboot-vue3@3.7.3 dev > vite The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. failed to load config from E:\p\jeecgboot-vue3\vite.config.ts error when starting dev server: Error [ERR_REQUIRE_ESM]: require() of ES Module E:\p\jeecgboot-vue3\node_modules\.pnpm\@rolldown+pluginutils@1.0.0-beta.43\node_modules\@rolldown\pluginutils\dist\index.mjs not supported. Instead change the require of E:\p\jeecgboot-vue3\node_modules\.pnpm\@rolldown+pluginutils@1.0.0-beta.43\node_modules\@rolldown\pluginutils\dist\index.mjs to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (E:\p\jeecgboot-vue3\node_modules\.pnpm\@vitejs+plugin-vue-jsx@4.2.0_vite@6.3.6_@types+node@20.19.21_jiti@2.6.1_less@4.4.2_terser@5.4_jozhrrldmrye4r4j5ev5k2qgy4\node_modules\@vitejs\plugin-vue-jsx\dist\index.cjs:8:21) at _require.extensions.<computed> [as .js] (file:///E:/p/jeecgboot-vue3/node_modules/.pnpm/vite@6.3.6_@types+node@20.19.21_jiti@2.6.1_less@4.4.2_terser@5.44.0_tsx@4.20.6/node_modules/vite/dist/node/chunks/dep-Bu492Fnd.js:49449:9)
最新发布
10-15
1. **Vite弃用CJS API**：Vite从3.0版本开始，逐渐弃用CommonJS（CJS）模块，转向ESM（ES Modules）。因此，如果项目中有使用require引入Vite，或者依赖的某些模块使用CJS，而Vite要求ESM，就会出现问题。 2. **ERR_...
failed to load config from C:\idea_project\smart-electrical\front\vite.config.js error when starting dev server: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'C:\idea_project\smart-electrical\front\node_modules\vite\' imported from C:\idea_project\smart-electrical\front \node_modules\.vite-temp\vite.config.js.timestamp-1748295198500-23ef21e81b2c7.mjs Did you mean to import vite/index.cjs? at new NodeError (node:internal/errors:405:5) at legacyMainResolve (node:internal/modules/esm/resolve:233:9) at packageResolve (node:internal/modules/esm/resolve:874:14) at moduleResolve (node:internal/modules/esm/resolve:936:20) at defaultResolve (node:internal/modules/esm/resolve:1129:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:835:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)
05-28
用户提到错误发生在加载vite.config.js配置文件时，这说明问题可能出在Vite本身的安装或配置上。首先想到的是检查vite是否已经正确安装在项目中。如果用户是全局安装的，可能项目本地没有安装，导致找不到模块。这...
vue3（vite）中引入commonjs包
weixin_42964571的博客
08-21 8050
vite vue3 require commonjs
uniapp vite3 require导入commonJS 的js文件方法
weixin_42333548的博客
09-06 2702
在Vite 3中，你可以通过配置vite.config.js来实现导入CommonJS（CJS）风格的模块。Vite 默认支持ES模块导入，但如果你需要导入CJS模块，可以使用特定的插件，比如@originjs/vite-plugin-commonjs。然后就可以在项目里面使用require引入，使用module.exports导出了,如下案例。vite3 导入commonJS 方式导出。然后，在uniapp项目根目录新建。
「Vite」基于vite配置mock，优化出现大量.mjs/.cjs文件的方案
W-Mo-Mo的博客
07-19 1524
近期构建一个工程，前端采用了vite构建，配置mock模拟数据时，发现当mock数据发生改变时，就出现了大量的.mjs/.cjs多余文件，还会导致工程运行卡死！3.根目录下新建mock文件夹，下面新建 mockServer.js 和 modules文件夹。2.修改vite.config.js中 关于viteMockServe的配置。然后当修改mock中的文件时就会出现大量的.mjs或者.cjs文件…4. axios中进行配置，然后在对应的.vue组件中调用就可以啦。
vite是如何支持cjs的？
王铁柱666的博客
11-04 643
esbuild是一个极速的JavaScript打包器和压缩器，它可以将不同格式的模块（如ESM、CJS）转换为浏览器可以理解的代码。在预构建过程中，esbuild会将CJS模块转换为ESM格式，以便Vite能够在开发服务器中按需加载这些模块。然而，需要注意的是，在生产环境中，Vite仍然会使用Rollup进行更精细化的打包，以确保最佳的性能和兼容性。通过Rollup的配置选项，Vite可以确保最终输出的包符合CJS规范。这些插件可以在构建过程中转换、优化或处理CJS代码，以确保其与Vite的其他部分兼容。
Vite 打包如何允许存在commonjs
weixin_59685936的博客
06-28 2928
Vite 打包如何允许存在commonjs
【Vite-Vue3】基于vite生成的Vue3项目不在支持【CommonJS的require语句导入了】
weixin_43343144的博客
10-27 3720
安装 | Vue.js uni-app官网
Node 加载模块过程
lizhenqii的博客
10-12 697
Node 加载模块过程 概述 Node 对 ES6 模块的处理比较麻烦，因为它有自己的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。 Node 要求 ES6 模块采用.mjs 后缀文件名。也就是说，只要脚本文件里面使用 import 或者 export 命令，那么就必须采用.mjs 后缀名。requ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值