Import-Aliasnamen

Ein Aliasname (kurz Alias) ist eine Möglichkeit, um Abkürzungen für Importpfade zu erstellen.

Aliasnamen können dabei helfen, die Entwicklungserfahrung in Codebasen mit vielen Verzeichnissen oder relativen Importpfaden zu verbessern.

mein-projekt/src/pages/ueber-uns/firma.astro

---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---

In diesem Beispiel müsste man bei der Entwicklung die Baumbeziehung zwischen src/pages/ueber-uns/firma.astro, src/components/controls/Button.astro und src/assets/logo.png berücksichtigen, um die richtigen relativen Importpfade definieren zu können. Und falls die Datei firma.astro jemals verschoben werden sollte, müssten diese Importpfade ebenfalls aktualisiert werden.

Um diese Situation zu verbessern, kannst du Import-Aliasnamen entweder in der Datei tsconfig.json oder jsconfig.json hinzufügen.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

Mit dieser zentralen Änderung kannst du die Importpfade nun überall in deinem Projekt benutzen:

mein-projekt/src/pages/ueber-uns/firma.astro

---
import Button from '@components/Button.astro';
import logoUrl from '@assets/logo.png';
---

Die von dir definierten Aliasnamen werden auch automatisch in VS Code und andere Editoren integriert.