Алиасы

Алиасы это способ создания сокращений для ваших импортов.

Алиасы могут помочь улучшить опыт разработки в кодовых базах с большим количеством папок или относительных импортов.

src/pages/about/company.astro

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

В этом примере, разработчику необходимо понимать дерево отношений между src/pages/about/company.astro, src/components/controls/Button.astro, и src/assets/logo.png. И затем, если файл company.astro будет перемещен, эти импорты также потребовалось бы обновить.

Вы можете добавить алиасы импортов в tsconfig.json или jsconfig.json.

tsconfig.json

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

Заметка

Убедитесь, что compilerOptions.baseUrl настроен, чтобы пути с алиасами могли быть выполнены.

Сервер разработки автоматически перезапустится после этого изменения конфигурации. Теперь вы можете импортировать с помощью алиасов в любом месте вашего проекта.

src/pages/about/company.astro

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

Эти алиасы также автоматически интегрируются в VS Code и другие редакторы.