前言

在 JavaScript 開發(fā)領(lǐng)域，尤其是在 Node.js 環(huán)境中，我們經(jīng)常會遇到 .js、.mjs 和 .cjs 這三種不同的文件擴(kuò)展名。它們看似只是簡單的后綴差異，實(shí)則蘊(yùn)含著不同的模塊規(guī)范和運(yùn)行機(jī)制。理解這些區(qū)別，對于我們編寫高效、穩(wěn)定且可維護(hù)的代碼至關(guān)重要。

一、.js 文件

.js 是 JavaScript 文件最常見的擴(kuò)展名，具有廣泛的通用性。在 Node.js 項(xiàng)目里，如果 package.json 文件中不存在 "type": "module" 字段時，.js 文件默認(rèn)遵循 CommonJS 模塊規(guī)范。

（一）導(dǎo)入與導(dǎo)出

CommonJS 使用 require() 函數(shù)進(jìn)行模塊導(dǎo)入，通過 module.exports 或 exports 來導(dǎo)出模塊內(nèi)容。例如，假設(shè)有一個名為 mathUtils.js 的文件，用于提供簡單的數(shù)學(xué)運(yùn)算功能：

// 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)); 

（二）特點(diǎn)與適用場景

CommonJS 模塊的特點(diǎn)是同步加載，即當(dāng)一個模塊被 require() 時，Node.js 會暫停執(zhí)行當(dāng)前模塊，直到所需模塊被完全加載并執(zhí)行完畢。這種方式適用于服務(wù)器端開發(fā)，因?yàn)榉?wù)器環(huán)境下的文件通常存儲在本地文件系統(tǒng)中，同步加載的性能開銷相對較小。在傳統(tǒng)的 Node.js 項(xiàng)目中，.js 文件作為 CommonJS 模塊被廣泛使用。

二、.mjs 文件

.mjs 文件擴(kuò)展名明確表示該文件是一個 ES 模塊，遵循 ECMAScript 標(biāo)準(zhǔn)的模塊規(guī)范。

（一）導(dǎo)入與導(dǎo)出

ES 模塊使用 import 和 export 關(guān)鍵字來處理模塊的導(dǎo)入和導(dǎo)出。例如，我們將上述 mathUtils.js 改寫為 ES 模塊形式，即 mathUtils.mjs：

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

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

在其他文件中導(dǎo)入使用時：

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

此外，ES 模塊還支持默認(rèn)導(dǎo)出，例如：

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

導(dǎo)入時：

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

（二）特點(diǎn)與適用場景

ES 模塊支持靜態(tài)導(dǎo)入和導(dǎo)出，這意味著在編譯階段就能確定模塊的依賴關(guān)系，有助于代碼的優(yōu)化和分析。同時，它的動態(tài)導(dǎo)入功能也為我們提供了更靈活的加載方式。例如：

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

這種模塊系統(tǒng)在前端開發(fā)和現(xiàn)代的 Node.js 項(xiàng)目中應(yīng)用廣泛，特別是在需要使用原生 ES 模塊特性的場景中。

三、.cjs 文件

.cjs 文件擴(kuò)展名明確表示該文件是一個 CommonJS 模塊。當(dāng)項(xiàng)目整體使用 ES 模塊（通過在 package.json 中設(shè)置 "type": "module"），但部分文件仍需要使用 CommonJS 模塊時，就可以將這些文件的擴(kuò)展名改為 .cjs。

（一）導(dǎo)入與導(dǎo)出

其導(dǎo)入和導(dǎo)出方式與傳統(tǒng)的 CommonJS .js 文件相同，使用 require() 函數(shù)導(dǎo)入，module.exports 或 exports 導(dǎo)出。例如：

// 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');

（二）特點(diǎn)與適用場景

在以 ES 模塊為主的項(xiàng)目中，.cjs 文件用于兼容那些只支持 CommonJS 模塊的舊庫或模塊，確保項(xiàng)目的順利運(yùn)行。同時，對于一些對兼容性要求較高，不適合立即轉(zhuǎn)換為 ES 模塊的代碼，也可以保留為 .cjs 文件。

四、總結(jié)

.js 文件可以根據(jù) package.json 中的 "type" 字段被解析為 CommonJS 或 ES 模塊，具有一定的靈活性，但也可能帶來混淆。.mjs 文件明確表示為 ES 模塊，使用 import 和 export 關(guān)鍵字，適用于現(xiàn)代 JavaScript 開發(fā)，尤其是在需要使用 ES 模塊特性的場景。.cjs 文件則明確為 CommonJS 模塊，在以 ES 模塊為主的項(xiàng)目中，用于兼容舊的庫或模塊。

在實(shí)際開發(fā)中，我們需要根據(jù)項(xiàng)目的需求、模塊的類型以及與其他庫的兼容性，合理選擇使用 .js、.mjs 和 .cjs 文件擴(kuò)展名。正確使用這些擴(kuò)展名，不僅可以提高代碼的可讀性和可維護(hù)性，還能確保項(xiàng)目在不同環(huán)境下的穩(wěn)定運(yùn)行。

希望通過本文的介紹，你對這三種文件擴(kuò)展名的區(qū)別有了更深入的理解，并能在今后的項(xiàng)目中靈活運(yùn)用它們。

到此這篇關(guān)于.js、.mjs 和.cjs 文件擴(kuò)展名區(qū)別的文章就介紹到這了,更多相關(guān).js、.mjs和.cjs文件擴(kuò)展名區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論