Verbessern von JavaScript-Code mit ES-Modulen: Export, Import und darüber hinaus

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 Export-Schlüsselwort 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!

Der Standardexport ermöglicht einen einzelnen Standardexport pro Modul. Der Artikel 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