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.

Le serveur de développement redémarrera automatiquement après ce changement de configuration. Vous pouvez maintenant 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.