一文深入探究.js、.mjs 和.cjs 文件扩展名的区别

前言

在 JavaScript 开发领域，尤其是在 Node.js 环境中，我们经常会遇到 .js、.mjs 和 .cjs 这三种不同的文件扩展名。它们看似只是简单的后缀差异，实则蕴含着不同的模块规范和运行机制。理解这些区别，对于我们编写高效、稳定且可维护的代码至关重要。

一、.js 文件

.js 是 JavaScript 文件最常见的扩展名，具有广泛的通用性。在 Node.js 项目里，如果 package.json 文件中不存在 "type": "module" 字段时，.js 文件默认遵循 CommonJS 模块规范。

（一）导入与导出

CommonJS 使用 require() 函数进行模块导入，通过 module.exports 或 exports 来导出模块内容。例如，假设有一个名为 mathUtils.js 的文件，用于提供简单的数学运算功能：

// mathUtils.mjs
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

在另一个文件中使用该模块时，代码如下：

const math = require('./mathUtils.js');
console.log(math.add(5, 3)); 
console.log(math.subtract(5, 3)); 

（二）特点与适用场景

CommonJS 模块的特点是同步加载，即当一个模块被 require() 时，Node.js 会暂停执行当前模块，直到所需模块被完全加载并执行完毕。这种方式适用于服务器端开发，因为服务器环境下的文件通常存储在本地文件系统中，同步加载的性能开销相对较小。在传统的 Node.js 项目中，.js 文件作为 CommonJS 模块被广泛使用。

二、.mjs 文件

.mjs 文件扩展名明确表示该文件是一个 ES 模块，遵循 ECMAScript 标准的模块规范。

（一）导入与导出

ES 模块使用 import 和 export 关键字来处理模块的导入和导出。例如，我们将上述 mathUtils.js 改写为 ES 模块形式，即 mathUtils.mjs：

// mathUtils.mjs
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

在其他文件中导入使用时：

import { add, subtract } from './mathUtils.mjs';
console.log(add(5, 3)); 
console.log(subtract(5, 3)); 

此外，ES 模块还支持默认导出，例如：

// person.mjs
const name = 'John';
const age = 30;
export default { name, age };

导入时：

import person from './person.mjs';
console.log(person.name); 
console.log(person.age); 

（二）特点与适用场景

ES 模块支持静态导入和导出，这意味着在编译阶段就能确定模块的依赖关系，有助于代码的优化和分析。同时，它的动态导入功能也为我们提供了更灵活的加载方式。例如：

async function loadModule() {
    const module = await import('./someModule.mjs');
    module.doSomething();
}

这种模块系统在前端开发和现代的 Node.js 项目中应用广泛，特别是在需要使用原生 ES 模块特性的场景中。

三、.cjs 文件

.cjs 文件扩展名明确表示该文件是一个 CommonJS 模块。当项目整体使用 ES 模块（通过在 package.json 中设置 "type": "module"），但部分文件仍需要使用 CommonJS 模块时，就可以将这些文件的扩展名改为 .cjs。

（一）导入与导出

其导入和导出方式与传统的 CommonJS .js 文件相同，使用 require() 函数导入，module.exports 或 exports 导出。例如：

// logger.cjs
const fs = require('fs');

function log(message) {
    fs.writeFileSync('log.txt', message + '\n', { flag: 'a' });
}

module.exports = { log };

在其他文件中使用：

const logger = require('./logger.cjs');
logger.log('This is a log message');

（二）特点与适用场景

在以 ES 模块为主的项目中，.cjs 文件用于兼容那些只支持 CommonJS 模块的旧库或模块，确保项目的顺利运行。同时，对于一些对兼容性要求较高，不适合立即转换为 ES 模块的代码，也可以保留为 .cjs 文件。

四、总结

.js 文件可以根据 package.json 中的 "type" 字段被解析为 CommonJS 或 ES 模块，具有一定的灵活性，但也可能带来混淆。.mjs 文件明确表示为 ES 模块，使用 import 和 export 关键字，适用于现代 JavaScript 开发，尤其是在需要使用 ES 模块特性的场景。.cjs 文件则明确为 CommonJS 模块，在以 ES 模块为主的项目中，用于兼容旧的库或模块。

在实际开发中，我们需要根据项目的需求、模块的类型以及与其他库的兼容性，合理选择使用 .js、.mjs 和 .cjs 文件扩展名。正确使用这些扩展名，不仅可以提高代码的可读性和可维护性，还能确保项目在不同环境下的稳定运行。

希望通过本文的介绍，你对这三种文件扩展名的区别有了更深入的理解，并能在今后的项目中灵活运用它们。

到此这篇关于.js、.mjs 和.cjs 文件扩展名区别的文章就介绍到这了,更多相关.js、.mjs和.cjs文件扩展名区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！