Перейти к содержимому

Алиасы

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

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

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 и другие редакторы.