Türchen 09 | JS Adventskalender

Modules – Code organisieren mit ES6-Modulen

Die Einführung von ES6-Modulen (auch bekannt als ES2015-Module) hat die Art und Weise, wie wir JavaScript-Code strukturieren und organisieren, revolutioniert. Module ermöglichen es Entwicklern, Code in wiederverwendbare, isolierte Einheiten zu zerlegen, was die Wartbarkeit und Lesbarkeit von Anwendungen verbessert. In diesem Artikel werden wir die Grundlagen von ES6-Modulen erläutern und zeigen, wie sie in der Praxis eingesetzt werden können.

Was sind ES6-Module?

Ein Modul ist eine Datei, die ihren eigenen Gültigkeitsbereich hat und bestimmte Teile (Variablen, Funktionen, Klassen) nach außen hin exportieren kann. Andere Module können diese exportierten Teile dann importieren und verwenden. Dies fördert eine saubere Trennung von Verantwortlichkeiten und verhindert Namenskonflikte.

Warum Module verwenden?

Bessere Organisation: Module helfen dabei, den Code in logische Einheiten zu unterteilen.
Wiederverwendbarkeit: Einmal geschriebene Module können in verschiedenen Teilen der Anwendung oder sogar in anderen Projekten verwendet werden.
Isolierter Gültigkeitsbereich: Variablen und Funktionen innerhalb eines Moduls sind standardmäßig nicht global verfügbar, was unerwartete Überschreibungen verhindert.

Grundlagen: Export und Import

Exportieren von Modulen

Es gibt zwei Arten von Exporten in ES6-Modulen:

Named Exports (benannte Exporte): Mehrere Exporte pro Modul sind möglich.
Default Exports (Standardexporte): Nur ein Standardexport pro Modul.

Beispiel für Named Exports:

Datei: mathUtils.js

// Funktionen exportieren
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// Variable exportieren
export const PI = 3.1415;

Beispiel für Default Export:

Datei: logger.js

export default function log(message) {
  console.log(`[Log]: ${message}`);
}

Importieren von Modulen

Named Imports:

import { add, multiply, PI } from './mathUtils.js';

console.log(add(2, 3));       // 5
console.log(multiply(4, 5));  // 20
console.log(PI);              // 3.1415

Umbenennen von Imports:

import { add as sum, multiply as product } from './mathUtils.js';

console.log(sum(2, 3));       // 5
console.log(product(4, 5));   // 20

Importieren aller Exporte als Objekt:

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

console.log(math.add(2, 3));       // 5
console.log(math.multiply(4, 5));  // 20
console.log(math.PI);              // 3.1415

Default Import:

import log from './logger.js';

log('Dies ist eine Nachricht'); // [Log]: Dies ist eine Nachricht

Kombination von Default und Named Exports

Ein Modul kann sowohl einen Standardexport als auch benannte Exporte haben.

Datei: toolkit.js

export default function greet(name) {
  console.log(`Hallo, ${name}!`);
}

export const version = '1.0.0';

export function farewell(name) {
  console.log(`Auf Wiedersehen, ${name}!`);
}

Importieren:

import greet, { version, farewell } from './toolkit.js';

greet('Anna');          // Hallo, Anna!
console.log(version);   // 1.0.0
farewell('Anna');       // Auf Wiedersehen, Anna!

Module in Browsern verwenden

In modernen Browsern können ES6-Module direkt verwendet werden, indem das type="module" Attribut im <script> Tag gesetzt wird.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Modulbeispiel</title>
</head>
<body>
  <script type="module" src="main.js"></script>
</body>
</html>

Datei: main.js

import { add } from './mathUtils.js';

console.log(add(10, 20)); // 30

Wichtig: Beim Laden von Modulen im Browser müssen die Dateien über einen Webserver bereitgestellt werden. Das direkte Öffnen der HTML-Datei über das Dateisystem (file://) führt zu CORS-Fehlern.

Module in Node.js verwenden

Ab Node.js Version 12 können ES6-Module mit der Dateiendung .mjs oder durch Setzen von "type": "module" in der package.json verwendet werden.

Option 1: Verwendung von .mjs

Datei: mathUtils.mjs

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

Datei: main.mjs

import { subtract } from './mathUtils.mjs';

console.log(subtract(10, 5)); // 5

Ausführung:

node main.mjs

Option 2: Setzen von "type": "module"

In der package.json

{
  "name": "modul-projekt",
  "version": "1.0.0",
  "type": "module"
}

Danach können .js Dateien mit ES6-Modulen verwendet werden.

Praktische Tipps

Relative Pfade verwenden: Beim Import müssen relative Pfade mit ./ oder ../ angegeben werden, wenn es sich nicht um ein Modul aus node_modules handelt.
Dateiendungen angeben: In Browsern und Node.js müssen die Dateiendungen .js oder .mjs beim Import angegeben werden.
Zirkuläre Abhängigkeiten vermeiden: Module sollten so gestaltet sein, dass sie keine zirkulären Abhängigkeiten erzeugen, um Fehler zu vermeiden.

Vergleich mit CommonJS

Vor ES6 wurden Module in JavaScript häufig mit dem CommonJS-Format verwendet, insbesondere in Node.js.

CommonJS-Beispiel:

Datei: mathUtils.js

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

module.exports = { divide };

Importieren:

const { divide } = require('./mathUtils.js');

console.log(divide(10, 2)); // 5

Unterschiede:

Syntax: ES6 verwendet import und export, während CommonJS require und module.exports nutzt.
Zeitpunkt der Auswertung: ES6-Module sind statisch und werden zur Kompilierzeit ausgewertet, während CommonJS dynamisch zur Laufzeit ausgewertet wird.
Asynchrones Laden: ES6-Module unterstützen asynchrones Laden, was in Browsern nützlich ist.

Fazit

ES6-Module bieten eine standardisierte und effiziente Methode, um JavaScript-Code zu organisieren. Durch die Verwendung von import und export wird der Code modularer, wartbarer und leichter zu verstehen. Egal, ob du eine kleine Bibliothek oder eine große Anwendung entwickelst, die Nutzung von ES6-Modulen ist ein wichtiger Schritt in Richtung moderner JavaScript-Entwicklung.

Beginne noch heute, ES6-Module in deinen Projekten einzusetzen, und erlebe den Unterschied in der Struktur und Qualität deines Codes!