.mjs 和 .js 文件的区别
.mjs 和 .js 文件扩展名在 JavaScript 生态系统中都有广泛的应用，但它们在语义和用途上有一些区别，尤其是在模块系统方面。
1. .js 文件
.js 是传统的 JavaScript 文件扩展名，用于表示 JavaScript 源代码文件。它是最通用的扩展名，适用于各种 JavaScript 环境，包括浏览器和 Node.js。
特点：
- 通用性强：
.js文件可以在浏览器、Node.js 等环境中运行。 - 模块系统：在 Node.js 中，
.js文件默认使用 CommonJS 模块系统（require和module.exports）。在浏览器中，.js文件通常不涉及模块系统，除非使用构建工具（如 Webpack）或现代浏览器支持的 ES 模块。 - 兼容性：几乎所有 JavaScript 环境都支持
.js文件。
2. .mjs 文件
.mjs 是用于明确标识一个文件为 ECMAScript 模块（ESM） 的扩展名。它在 Node.js 12+ 中被引入，用于区分 CommonJS 模块和 ES 模块。
特点：
- 明确的模块系统：
.mjs文件明确使用 ES 模块语法（import和export），而不是 CommonJS 模块系统。 - 严格模式：
.mjs文件默认运行在严格模式（strict mode）下，这与 ES 模块的规范一致。 - 顶层
await：在.mjs文件中，你可以使用顶层await，这是 ES 模块的一个特性。 - 静态分析：由于 ES 模块的静态特性，
.mjs文件更适合静态分析工具（如 TypeScript、ESLint 等）。 - 浏览器支持：现代浏览器原生支持 ES 模块，因此
.mjs文件可以直接在浏览器中使用，而无需额外的构建工具。
3. 主要区别
| 特性 | .js 文件 | .mjs 文件 |
|---|---|---|
| 模块系统 | 默认使用 CommonJS（Node.js） | 明确使用 ES 模块 |
| 语法 | require 和 module.exports | import 和 export |
| 严格模式 | 不强制（但推荐） | 默认启用严格模式 |
顶层 await | 不支持 | 支持 |
| 静态分析 | 动态模块加载，不利于静态分析 | 静态模块加载，适合静态分析 |
| 浏览器支持 | 需要构建工具（如 Webpack） | 现代浏览器原生支持 |
4. 使用场景
.js文件：- 适用于传统的 Node.js 项目，尤其是那些依赖 CommonJS 模块系统的项目。
- 适用于浏览器项目，尤其是那些需要构建工具的项目。
.mjs文件：- 适用于需要明确使用 ES 模块的项目，例如现代的前端项目或支持 ES 模块的 Node.js 项目。
- 适用于需要静态分析和工具支持的项目，例如 TypeScript 项目。
- 适用于需要顶层
await的场景。
5. 示例代码
.js 文件示例（CommonJS 模块）
JavaScript复制
// index.js
const moduleA = require('./moduleA.js');
console.log(moduleA.greet()); // 输出模块A的greet方法.mjs 文件示例（ES 模块）
JavaScript复制
// index.mjs
import moduleA from './moduleA.mjs';
console.log(moduleA.greet()); // 输出模块A的greet方法总结
.js文件：通用性强，适用于传统的 CommonJS 模块系统。.mjs文件：明确使用 ES 模块，适合现代项目和需要静态分析的场景。
选择哪种文件扩展名取决于你的项目需求和目标环境。如果你需要使用 ES 模块的特性（如 import/export、顶层 await），建议使用 .mjs 文件。如果你的项目依赖于 CommonJS 模块系统，或者需要兼容旧版本的 Node.js，.js 文件是更好的选择。