ES-Module: import/export, ein Projekt strukturieren

Strukturiere deine Projekte mit ES-Modulen, indem du ihre statische Analyse nutzt und toxische Barrels sowie zirkuläre Abhängigkeiten vermeidest.

8 Min. · 3 Fragen

ES-Module sind statisch: import- und export-Anweisungen werden aufgelöst, wenn die Datei geparst wird, bevor irgendein Code läuft. Genau das ermöglicht Tree-Shaking (das Entfernen von Code, der nie importiert wird) und das Aufspüren von Namensfehlern zur Build-Zeit. Benannte Exporte oder Standard-Export? Benannte Exporte gewinnen an fast jeder Front: refactoring-freundliches Umbenennen, zuverlässige Autovervollständigung und keine Möglichkeit, dieselbe Sache unter zehn verschiedenen Namen zu importieren. Hebe dir den Standard-Export für den Fall auf, in dem das Modul eine offensichtliche Sache exportiert.

export const TAX_RATE = 0.2;

export function applyTax(price) {
  return price * (1 + TAX_RATE);
}

export default class Cart {
  items = [];
  add(item) {
    this.items.push(item);
    return this;
  }
}

Auf der Verbraucherseite gibt es vier Formen: benannter Import (mit optionalem Aliasing über as), Standard-Import, Namensraum-Import (* as) und dynamischer Import import(), der eine Promise eines Namensraums zurückgibt. Letzterer ist der Baustein des Code-Splittings: Lade ein schweres Modul (Editor, Diagramm, PDF) erst in dem Moment, in dem der Nutzer es tatsächlich braucht.

import Cart, { applyTax, TAX_RATE } from "./cart.js";
import * as cartModule from "./cart.js";

console.log(applyTax(100), TAX_RATE); // 120 0.2
console.log(cartModule.TAX_RATE); // 0.2

const lazy = await import("./cart.js");
const cart = new lazy.default();
console.log(cart instanceof Cart); // true

Zur Organisation solltest du lieber nach Feature aufteilen (features/cart/, features/auth/) als nach technischem Typ (controllers/, helpers/): Code, der sich gemeinsam ändert, lebt gemeinsam, und ein Feature zu entfernen bedeutet, einen Ordner zu löschen. Stelle jedes Feature über einen schmalen Einstiegspunkt bereit und behandle jeden Import, der diesen Einstiegspunkt umgeht, als Grenzverletzung.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was macht Tree-Shaking mit ES-Modulen möglich?
   • Bundler führen den Code aus, um zu sehen, was verwendet wird
   • Importe und Exporte sind statisch und können ohne Ausführung des Codes analysiert werden
   • ES-Module komprimieren toten Code automatisch
2. Was gibt der Ausdruck import("./module.js") zurück?
   • Den Modul-Namensraum, synchron
   • Eine Promise, die mit dem Modul-Namensraum aufgelöst wird
   • Eine Funktion, die das Modul beim Aufruf lädt
   • Nur den Standard-Export des Moduls
3. Was ist das Hauptrisiko von Barrel-Dateien (ein Index, der einen ganzen Ordner re-exportiert)?
   • Sie machen benannte Exporte unmöglich
   • Sie können den ganzen Ordner für einen einzigen Import laden und das Tree-Shaking behindern
   • Sie verhindern den dynamischen Import des Ordners