Alias

Un alias est une façon de créer des raccourcis pour vos imports.

Les alias peuvent aider à améliorer l’expérience de développement dans les codebases avec de nombreux dossiers ou importations relatives.

src/pages/about/company.astro

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

Dans cet exemple, un développeur devra comprendre la relation de l’arborescente entre src/pages/about/company.astro, src/components/controls/Button.astro, et src/assets/logo.png. Et si le fichier company.astro devait être déplacé, ces importations devraient également être mises à jour.

Vous pouvez ajouter des alias d’importation à partir de tsconfig.json ou jsconfig.json.

tsconfig.json

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

Note

Assurez-vous que compilerOptions.baseUrl est défini pour que les chemins aliasés puissent être résolus.

Grâce à cette modification, vous pouvez désormais importer en utilisant les alias n’importe où dans votre projet :

src/pages/about/company.astro

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

Ces alias sont également intégrés automatiquement dans VS Code et d’autres éditeurs de code.