Skip to content
On this page

.mjs 和 .js 文件的区别

.mjs.js 文件扩展名在 JavaScript 生态系统中都有广泛的应用,但它们在语义和用途上有一些区别,尤其是在模块系统方面。

1. .js 文件

.js 是传统的 JavaScript 文件扩展名,用于表示 JavaScript 源代码文件。它是最通用的扩展名,适用于各种 JavaScript 环境,包括浏览器和 Node.js。

特点:

  • 通用性强.js 文件可以在浏览器、Node.js 等环境中运行。
  • 模块系统:在 Node.js 中,.js 文件默认使用 CommonJS 模块系统(requiremodule.exports)。在浏览器中,.js 文件通常不涉及模块系统,除非使用构建工具(如 Webpack)或现代浏览器支持的 ES 模块。
  • 兼容性:几乎所有 JavaScript 环境都支持 .js 文件。

2. .mjs 文件

.mjs 是用于明确标识一个文件为 ECMAScript 模块(ESM) 的扩展名。它在 Node.js 12+ 中被引入,用于区分 CommonJS 模块和 ES 模块。

特点:

  • 明确的模块系统.mjs 文件明确使用 ES 模块语法(importexport),而不是 CommonJS 模块系统。
  • 严格模式.mjs 文件默认运行在严格模式(strict mode)下,这与 ES 模块的规范一致。
  • 顶层 await:在 .mjs 文件中,你可以使用顶层 await,这是 ES 模块的一个特性。
  • 静态分析:由于 ES 模块的静态特性,.mjs 文件更适合静态分析工具(如 TypeScript、ESLint 等)。
  • 浏览器支持:现代浏览器原生支持 ES 模块,因此 .mjs 文件可以直接在浏览器中使用,而无需额外的构建工具。

3. 主要区别

特性.js 文件.mjs 文件
模块系统默认使用 CommonJS(Node.js)明确使用 ES 模块
语法require 和 module.exportsimport 和 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 文件是更好的选择。

Released under the MIT License.