JavaScript-Module sind eine Möglichkeit, JavaScript-Code zu organisieren und wiederzuverwenden. Mithilfe von Modulen kann der Code in kleinere, überschaubare Teile zerlegt werden, die dann importiert und bei Bedarf in anderen Teilen einer Anwendung verwendet werden können. Dieser modulare Ansatz hilft bei der Aufrechterhaltung einer sauberen Codebasis, erleichtert das Debuggen und verbessert die Wiederverwendbarkeit des Codes.

ES-Module vs. CommonJS

Es gibt verschiedene Modulsysteme im JavaScript-Ökosystem. ES Modules (ESM) ist der Standard in der ECMAScript-Spezifikation, der hauptsächlich im Browser verwendet wird und zunehmend in Node.js unterstützt wird. CommonJS ist ein weiteres Modulsystem, das traditionell in Node.js verwendet wurde.

ES-Module (ESM)

ES-Module (ESM) sind ein standardisiertes Modulsystem in JavaScript, das in ECMAScript 2015 (ES6) eingeführt wurde. Sie ermöglichen eine bessere Organisation und Wiederverwendbarkeit von Code, indem sie den Import und Export von Funktionen, Objekten und Grundelementen zwischen verschiedenen Dateien ermöglichen. Dieses Modulsystem wird in modernen JavaScript-Umgebungen, einschließlich Browsern und Node.js, weitgehend unterstützt.

Export und Import

Das Schlüsselwort export kennzeichnet Variablen und Funktionen, auf die von außerhalb des aktuellen Moduls zugegriffen werden sollte, sodass sie in anderen Teilen Ihrer Anwendung wiederverwendet werden können. Das Schlüsselwort import ermöglicht den Import dieser Funktionalitäten aus anderen Modulen und ermöglicht so eine modulare Programmierung und Wiederverwendung von Code.

Der benannte Export ermöglicht den Export mehrerer Elemente aus einem Modul. Jedes Element muss mit demselben Namen importiert werden, mit dem es exportiert wurde.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

Beim Importieren benannter Exporte müssen Sie dieselben Namen wie die Exporte verwenden.

import { greet } from './module.js';
greet(); // Hello, World!

Standardexport ermöglicht einen einzelnen Standardexport pro Modul. Das Element kann mit einem beliebigen Namen importiert werden.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

Beim Importieren des Standardexports können Sie einen beliebigen Namen verwenden.

import message  from './module.js';
message(); // Hello, World!

Module in HTML verwenden

Wenn Sie Module in einem Browser verwenden, müssen Sie diese in Ihre HTML-Datei einbinden. Sie verwenden das Attribut type="module" im

Browser-Unterstützung

Moderne Browser unterstützen JavaScript-Module nativ. Dazu gehören Chrome, Firefox, Safari, Edge und Opera. Ältere Browser wie Internet Explorer unterstützen jedoch keine Module. Für diese müssen Sie möglicherweise einen Bundler wie Webpack oder einen Transpiler wie Babel verwenden.

Module in Node.js verwenden
Um ES-Module in Node.js zu verwenden, können Sie die Dateierweiterung .mjs verwenden oder „type“: „module“ in der Datei package.json festlegen.

// package.json
{
 "type": "module"
}

Aliase importieren

Aliase in JavaScript-Modulen ermöglichen Ihnen den Import und Export von Funktionen unter verschiedenen Namen. Dies kann nützlich sein, um Namenskonflikte zu vermeiden oder um aussagekräftigere Namen im Kontext des Moduls bereitzustellen, das sie importiert.

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

Sie können diese Funktionen mit unterschiedlichen Namen mithilfe von Aliasen importieren:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Das gesamte Modul als Alias ​​importieren

Sie können das gesamte Modul als einen einzigen Alias ​​importieren, wodurch Sie auf alle Exporte unter einem Namespace zugreifen können.

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

Dynamischer Import

Sie können Module auch dynamisch mit der Funktion import() importieren, die ein Versprechen zurückgibt. Dies ist nützlich für Code-Splitting und Lazy Loading.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

In diesem Beispiel wird das Modul math.js dynamisch geladen, wenn die Funktion „loadModule“ aufgerufen wird.

CommonJS (CJS)

CommonJS ist ein Modulsystem, das hauptsächlich in Node.js verwendet wird. Es war das Standardmodulsystem vor der Standardisierung von ES-Modulen und wird in vielen Node.js-Projekten immer noch häufig verwendet. Es verwendet require() zum Importieren von Modulen und module.exports oder exports zum Exportieren von Funktionen aus einem Modul.

In CommonJS werden sowohl module.exports als auch exports verwendet, um Werte aus einem Modul zu exportieren. exports ist im Wesentlichen eine Abkürzung für module.exports und ermöglicht die Verwendung beider. Es wird jedoch normalerweise empfohlen, module.exports konsequent zu verwenden, um mögliche Verwirrung oder unerwartetes Verhalten zu vermeiden.

In diesem Beispiel wird module.exports eine Funktion zugewiesen, sodass der Anforderungsaufruf in app.js diese Funktion zurückgibt.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

In diesem Beispiel wird exports verwendet, um Eigenschaften zu module.exports hinzuzufügen. Der require-Aufruf in app.js gibt ein Objekt mit Additions- und Subtraktionsfunktionen zurück.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

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

JavaScript-Module bieten zahlreiche Vorteile, die die Organisation, Wartbarkeit und Leistung von Code verbessern.

• Wiederverwendbarkeit
  Mit Modulen können Sie wiederverwendbare Codeteile schreiben, die importiert und in verschiedenen Teilen Ihrer Anwendung oder sogar in verschiedenen Projekten verwendet werden können.

• Wartbarkeit
  Durch die Aufteilung des Codes in kleinere, eigenständige Module können Sie Ihre Codebasis effektiver verwalten und pflegen. Dadurch ist es einfacher, einzelne Module zu aktualisieren, umzugestalten und zu debuggen, ohne die gesamte Anwendung zu beeinträchtigen.

• Code-Splitting
  Module ermöglichen die Codeaufteilung, sodass Sie bei Bedarf nur den erforderlichen Code laden können, wodurch die anfänglichen Ladezeiten und die Gesamtleistung verbessert werden.

• Verbesserte Tests
  Modularer Code lässt sich einfacher testen, da Sie einzelne Module isoliert testen können. Dies führt zu zuverlässigeren und wartbareren Tests.

• Baumschütteln
  Moderne Modul-Bundler wie Webpack und Rollup können Tree Shaking durchführen, eine Technik, die ungenutzten Code aus dem endgültigen Bundle entfernt, was zu kleinerem und effizienterem Code führt.

Abschluss

In der JavaScript-Entwicklung hat die Einführung von ES-Modulen eine deutliche Abkehr vom traditionellen CommonJS-Modulsystem markiert. ES-Module bieten eine standardisierte und effiziente Möglichkeit, Abhängigkeiten zu verwalten und die Wartbarkeit zu verbessern. Die Export- und Importsyntax bietet eine klare und prägnante Möglichkeit, Module zu definieren und zu verwenden und fördert so eine bessere Organisation und Lesbarkeit in der Codebasis.