《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 691
你是否还在为Webpack复杂的配置而头疼？是否在开发过程中忍受漫长的构建等待？Vite（法语意为"快速的"，发音为/vit/）作为下一代前端构建工具，正以其惊人的速度和简洁的配置重新定义前端开发体验。本文将带你全面掌握Vite的配置技巧，从基础设置到高级优化，让你的项目构建速度提升10倍以上。 读完本文，你将能够： - 快速搭建和配置Vite开发环境 - 掌握核心配置选项，优化开发体验 - 深...
.js、.mjs 和 .cjs 的区别
Gleason
10-11 451
在 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 956
本文以项目中的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 1684
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 2700
在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...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值