JavaScript-Module spielen eine entscheidende Rolle bei der Organisation von Code, der Verbesserung der Wiederverwendbarkeit und der Verbesserung der Wartbarkeit von Anwendungen. Zwei hauptsächlich verwendete Modulsysteme sind CommonJS (CJS) und ECMAScript-Module (ESM). Das Verständnis ihrer Unterschiede und Fähigkeiten ist der Schlüssel, um sie effektiv in Ihren Projekten einzusetzen.

CommonJS (CJS)

CommonJS ist das Modulsystem, das ursprünglich für Node.js-Umgebungen entwickelt wurde. Es legt Wert auf Einfachheit und synchrones Laden von Modulen.

CommonJS-Export-/Importmodule

Module in CommonJS verwenden module.exports, um Werte, Objekte oder Funktionen zu exportieren.

1. Standardexport/-importe

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2. Benannte Exporte/Importe

// math.js
function add(a, b) {
    return a   b;
}

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

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript-Module (ESM)

ESM, eingeführt in ES6 (ES2015), ist das standardisierte Modulsystem für JavaScript. Es unterstützt sowohl das synchrone als auch das asynchrone Laden von Modulen und wird in modernen Browsern und in Node.js mit bestimmten Konfigurationen nativ unterstützt.

ECMAScript-Exportmodule

ESM verwendet Exportanweisungen, um Werte, Objekte oder Funktionen zu exportieren.

1. Standardexport/-import

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2. Benannte Exporte

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. Gemischte Exportstile in ECMAScript-Modulen

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

Hauptunterschiede zwischen CommonJS und ESM

• Syntax: CommonJS verwendet require() und module.exports, während ESM Import- und Exportanweisungen verwendet.
• Laden: CommonJS-Module werden synchron geladen, während ESM sowohl synchrones als auch asynchrones Laden unterstützt.
• Umgebung: CommonJS wird hauptsächlich in Node.js verwendet, während ESM nativ in Browsern unterstützt wird und in Node.js mit bestimmten Konfigurationen verwendet werden kann (Flag --experimental-modules oder Dateierweiterung .mjs).

Kompatibilität und Verwendung

• Node.js: CommonJS bleibt aufgrund seiner langjährigen Unterstützung und Einfachheit in Node.js-Umgebungen weit verbreitet.
• Browser: ESM erfreut sich zunehmender Beliebtheit, da Browser es zunehmend nativ unterstützen und eine bessere Leistung und modulares Laden von Code bieten.

Abschluss

Die Wahl zwischen CommonJS- und ECMAScript-Modulen hängt von der Umgebung und den Anforderungen Ihres Projekts ab. Während CommonJS robust für die Node.js-Backend-Entwicklung ist, bietet ESM Interoperabilität zwischen Browsern und modernen Node.js-Anwendungen. Das Verständnis dieser Modulsysteme versetzt Entwickler in die Lage, die modularen Funktionen von JavaScript effektiv zu nutzen.

Durch die Nutzung von CommonJS oder ESM können Entwickler die Codeorganisation verbessern, die Projektskalierbarkeit verbessern und die Zusammenarbeit in JavaScript-Projekten erleichtern.