在项目中常见的main.js和main.mjs有什么区别，我们该如何选择？

引言：文件名背后的模块系统之争

在 JavaScript 开发的广袤天地中，你或许会留意到main.js与main.mjs这两种文件扩展名。别小瞧这后缀的不同，它们实则代表了 JavaScript 世界里两种截然不同的模块系统：CommonJS 与 ES 模块（ES Module）。这二者的差异，从语法层面一路延伸到环境配置、兼容性以及生态习惯等多个维度。接下来，就让我们一同深入探寻它们的奥秘。

核心区别：模块系统的「语言」不同

JavaScript 的模块系统，恰似世界上形形色色的语言。main.js默认采用的 CommonJS（CJS），堪称 Node.js 早期的 "母语"，其语法简洁明了，在同步加载模块方面表现出色。而main.mjs所运用的 ES 模块（ESM），则是 JavaScript 官方标准化后的 "新语言"，语法更为现代，不仅支持异步加载，还具备静态分析的强大能力。

语法对比：从 "借书" 到 "网购" 的差异

CommonJS（main.js）：一次借一本书的 "图书馆模式"

在 CommonJS 的世界里，导入模块依靠require()方法进行同步加载，这就好比去图书馆借书，必须实实在在地等书借到手，才能继续后续的事情，在此期间代码执行会被阻塞。而导出模块时，则是通过module.exports或exports来暴露接口，仿佛在书架上贴上标签，清晰地标明书籍的内容。

下面来看一个具体示例，假设我们有一个math.js文件用于导出模块：

java 复制代码

// math.js（导出模块）
function add(a, b) {
    return a + b;
}
// 导出函数：在书架贴标签（module.exports）
module.exports = { add };

在main.js中导入该模块并使用：

javascript 复制代码

// main.js（导入模块）
const math = require('./math.js'); // 借书：必须等书拿到手才能用
console.log(math.add(2, 3)); // 输出：5

ES 模块（main.mjs）：同时预订多本书的 "网购模式"

ES 模块的导入方式采用import声明式导入，不仅支持异步加载（通过动态导入import()），还能像网购时同时下单多本书一样，无需阻塞后续操作。导出模块时，直接使用export标记可对外暴露的内容，直观又便捷。

同样以加法模块为例，math.mjs文件的导出如下：

javascript 复制代码

// math.mjs（导出模块）
export function add(a, b) { // 直接标记"可外卖"的菜品（export）
    return a + b;
}

在main.mjs中导入并使用：

csharp 复制代码

// main.mjs（导入模块）
import { add } from './math.mjs'; // 下单：无需等待，直接"引用"菜品
console.log(add(2, 3)); // 输出：5

环境配置：不同场景下的 "入场券"

Node.js 中的配置差异

main.js：需要 "特殊通行证" 才能用新语言

在 Node.js 环境里，.js文件默认遵循 CommonJS 规范。若想启用 ES 模块，就需要在package.json文件中添加"type": "module"，这就如同给文件贴上了 "新语言" 的标签。

json 复制代码

{
    "name": "my-project",
    "type": "module", // 告诉Node.js：这个项目用ES模块！
    "scripts": { "start": "node main.js" }
}

在早期的 Node.js 版本中，还需使用--experimental-modules标志来启用 ES 模块，不过该方式现已逐步被淘汰。

main.mjs：自带 "新语言" 标签

与之不同的是，.mjs文件在 Node.js 中会强制使用 ES 模块，无需任何额外配置，真正做到开箱即用。

浏览器中的兼容性问题

main.js：需要 "翻译器" 才能识别

传统浏览器通过

xml 复制代码

<script type="module" src="main.js"></script> <!-- 关键：type="module" -->

main.mjs：旧浏览器可能 "不识字"

虽说现代浏览器对 ES 模块提供了支持，但.mjs扩展名在部分旧浏览器（如 IE）中可能无法被识别。此时，需要服务器配置正确的 MIME 类型（application/javascript），否则很可能报错。因此，在浏览器环境中，建议优先使用.js扩展名，并通过type="module"启用 ES 模块，这样能获得更好的兼容性。

语法特性：从 "单线程" 到 "并行处理"

加载方式：同步 vs 异步

CommonJS（main.js）

require()是同步操作，必须等待模块加载完成才能执行后续代码。这就好比排队买票，前一个人没买完，后面的人只能干等着，在简单场景中尚可，但在复杂应用里，可能会对性能造成阻塞。

ES 模块（main.mjs）

在 ES 模块中，有静态导入（import）和动态导入（import()）两种方式。静态导入在浏览器中异步加载，不会阻塞 HTML 渲染；在 Node.js 中虽为同步加载，但支持静态分析，有利于打包优化。动态导入则支持异步加载模块，类似 "按需下载"，在大型应用拆分代码场景中极为实用。例如：

javascript 复制代码

// 动态导入：适合路由跳转或延迟加载
button.addEventListener('click', async () => {
    const module = await import('./feature.js'); // 点击时才加载模块
    module.init();
});

顶层await：代码结构的解放

CommonJS（main.js）

在 CommonJS 中，顶层不能直接使用await，await必须放在async函数内部，就如同 "只能在特定房间用电器"，这在一定程度上限制了代码结构的简洁性。

ES 模块（main.mjs）

ES 模块允许在顶层直接使用await，代码更加简洁明了，尤其适合需要异步操作的场景，比如读取文件、请求 API 等。

javascript 复制代码

// main.mjs中直接使用顶层await
const data = await fetch('https://api.example.com/data'); // 直接"边等外卖边做事"
console.log(await data.json());

Tree Shaking：打包优化的利器

ES 模块（main.mjs）

由于 ES 模块支持静态分析，在编译阶段就能确定模块依赖关系。这使得打包工具（如 Webpack、Rollup）能够通过 Tree Shaking 技术剔除未使用的代码，有效减少文件体积。例如，若只导入模块中的add函数，打包时会自动忽略未使用的subtract函数。

CommonJS（main.js）

CommonJS 的动态加载特性导致其难以进行静态分析，也就无法实现 Tree Shaking。不过，在一些对文件体积优化要求不高的场景中，这一特性并不会造成太大影响。

应用场景：如何选择合适的扩展名？

选main.js（CommonJS）的情况：

Node.js 传统项目

对于旧版 Node.js 项目，或者依赖 CommonJS 库（如 Express、Webpack 4 等）的项目，使用main.js无需额外配置，能快速投入开发，大大提高开发效率。

简单脚本或工具

当编写一次性脚本，比如自动化工具、测试脚本时，CommonJS 简单直接的特性能够满足需求，无需复杂的模块功能，让开发过程更加高效。

需要兼容旧环境

如果目标环境是不支持 ES 模块的浏览器或 Node.js 版本（如 Node.js < 14），那么main.js无疑是更好的选择，以确保项目能够在这些环境中正常运行。

示例：Node.js 传统后端项目

ini 复制代码

// main.js（CommonJS）
const express = require('express'); // 引入CommonJS库
const app = express();
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(3000);

选main.mjs（ES 模块）的情况：

新项目或现代前端应用

在开发 Vue 3、React 18 等新框架项目，或者使用 Webpack 5+、Vite 等现代构建工具时，ES 模块的特性能够充分发挥作用，为项目开发提供强大支持。

需要异步加载或静态优化的场景

在大型单页应用（SPA）拆分代码、浏览器端动态路由、服务器端按需加载模块等场景中，ES 模块的异步加载和静态优化能力能够显著提升应用性能。

共享库或 npm 包开发

在发布到 npm 的库开发中，优先使用 ES 模块（.mjs或.js + 配置），能方便用户通过import引入，提升库的易用性和兼容性。

示例：浏览器端动态导入模块

dart 复制代码

// main.mjs（ES模块）
// 点击按钮时动态加载弹窗模块
document.getElementById('btn').addEventListener('click', async () => {
    const { showModal } = await import('./modal.mjs'); // 异步加载
    showModal('Hello from ES Module!');
});

混合使用：当两种模块系统碰撞时

在实际开发过程中，有时可能需要同时使用 CommonJS 和 ES 模块。比如：

ES 模块引入 CommonJS 模块

在main.mjs中，可以直接通过import引入.js文件，Node.js 会自动将 CommonJS 模块转换为 ES 模块格式。

csharp 复制代码

import { add } from './math.js'; // 正确：ES模块引入CommonJS模块

CommonJS 引入 ES 模块

在main.js中，需要通过动态导入require('module').default来获取 ES 模块导出的内容，不过这一方式仅在 Node.js 中支持。

csharp 复制代码

const { default: add } = require('./math.mjs'); // 正确：CommonJS引入ES模块

总结：一张表帮你快速决策

维度	main.js（CommonJS）	main.mjs（ES 模块）
默认模块系统	CommonJS（Node.js）	ES 模块（Node.js/ 浏览器）
Node.js 配置	需package.json中type: module	无需配置，默认启用 ES 模块
浏览器支持	需	现代浏览器支持，旧版需服务器配置
语法特性	require/module.exports，同步加载	import/export，支持动态导入、顶层await
优化能力	不支持 Tree Shaking	支持静态分析和 Tree Shaking
适合场景	传统 Node.js 项目、简单脚本	现代前端 / 后端项目、大型应用、共享库开发

未来趋势：ES 模块的全面普及

随着 Node.js 和浏览器对 ES 模块的支持愈发完善（Node.js 已默认启用 ES 模块特性），.mjs扩展名或许会逐渐被.js取代，开发者可通过配置来区分模块系统。例如，在现代项目中，更推荐在package.json中统一配置"type": "module"，让所有.js文件均使用 ES 模块，避免扩展名带来的混乱。

无论最终选择哪种模块系统，关键在于深刻理解其背后的设计理念：CommonJS 适用于简单直接的同步场景，而 ES 模块则为复杂应用和未来发展提供了更为强大的工具链。开发者只需依据项目需求和技术栈，灵活做出选择即可。

希望这篇文章能助你透彻理解main.js与main.mjs的本质区别，并在实际开发中做出最优决策！倘若你在实践过程中有任何具体问题，欢迎随时交流探讨～