JavaScript Fortgeschritten Tag 6: Module & Tooling

Ziel dieses Tages

Heute wirst du lernen:

• Wie man Code professionell mit ES6-Modulen organisiert
• Grundlagen von Bundlern wie Webpack oder Vite
• Linting & Code-Formatierung mit Prettier
• Tree-Shaking, um ungenutzten Code zu entfernen

Am Ende wirst du in der Lage sein, Projekte wie ein professioneller Entwickler zu strukturieren.

Schritt 1: ES6-Module

Exportiere Funktionen, Objekte oder Variablen aus einer Datei und importiere sie in einer anderen:

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Schritt 2: Grundlagen von Bundlern

Verwende Webpack oder Vite, um mehrere JS-Dateien zu einem Bundle zu kombinieren:

• Bundler installieren (npm install vite oder npm install webpack)
• Einstiegsdatei definieren
• npm run build ausführen, um das Bundle zu erstellen

Schritt 3: Linting & Prettier

Für bessere Code-Qualität:

• Linting: eslint erkennt potenzielle Fehler
• Prettier: formatiert Code automatisch einheitlich

Schritt 4: Tree-Shaking

Ungenutzte Imports werden beim Bundling automatisch entfernt:

import { add, subtract } from './math.js';
// nur 'add' wird verwendet
console.log(add(2,3));

Übung

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(2, 3));

Aufgabe

Löse folgende Aufgaben:

• Teile ein kleines Projekt in Module auf
• Importiere und exportiere Funktionen korrekt

Beispiel:

// utils.js
export function greet(name) {
  return `Hallo ${name}`;
}

// main.js
import { greet } from './utils.js';
console.log(greet("Alex")); // Hallo Alex