Пропустить до содержимого

Алиасы

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

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

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/*"]
    }
  }
}

Благодаря этому изменению, вы можете импортировать используя алиасы в любом месте вашего проекта:

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

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