Pular para o conteúdo

Aliases

Um alias é uma maneira de criar atalhos para as suas importações.

Os aliases podem ajudar a melhorar a experiência de desenvolvimento em bases de código com muitos diretórios ou importações relativas.

src/pages/sobre/empresa.astro
---
import Botao from '../../components/controles/Botao.astro';
import logoUrl from '../../assets/logo.png?url';
---

Nesse exemplo, um desenvolvedor precisaria entender a relação de árvore entre src/pages/sobre/empresa.astro, src/components/controles/Botao.astro e src/assets/logo.png. E então, se o arquivo empresa.astro fosse movido, essas importações também precisariam ser atualizadas.

Você pode adicionar aliases de importação a partir de tsconfig.json ou jsconfig.json.

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

O servidor de desenvolvimento será reiniciado automaticamente após essa alteração de configuração. Agora você pode importar usando os aliases em qualquer lugar do seu projeto:

src/pages/sobre/empresa.astro
---
import Botao from '@components/Botao.astro';
import logoUrl from '@assets/logo.png?url';
---

Esses aliases também são integrados automaticamente ao VS Code e a outros editores.

Contribute

O que passa em sua cabeça?

Community