Aliasy

Alias jest sposobem na tworzenie skrótów dla twoich importów.

Aliasy mogą ułatwić pracę z kodem zawierającym wiele folderów i relatywnych importów.

src/pages/about/company.astro

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

W tym przykładzie, programista musiałby zrozumieć relację pomiędzy src/pages/about/company.astro, src/components/controls/Button.astro i src/assets/logo.png. Potem, jeśli company.astro zmieniłoby swoją lokalizację, importy te także musiałyby zostać zaktualizowane.

Możesz dodać aliasy dla importów w pliku tsconfig.json lub jsconfig.json.

tsconfig.json

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

Note

Upewnij się, że compilerOptions.baseUrl jest ustawione. Dzięki temu, ścieżki aliasowe będą mogły być rozwiązane.

Dzięki tej zmianie, możesz teraz importować używając aliasów gdziekolwiek w twoim projekcie:

src/pages/about/company.astro

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

Aliasy te są także automatycznie zintegrowane w VS Code i innych edytorach tekstu.