importエイリアス
エイリアスは、インポートのためのショートカットを作成する方法です。
エイリアスは、多くのディレクトリや相対的なインポートを持つコードベースにおいて、開発体験を改善するのに役立ちます。
---
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
のどちらかから追加できます。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@assets/*": ["src/assets/*"]
}
}
}
この変更により、プロジェクト内の任意の場所でエイリアスを使用してインポートできるようになりました。
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
これらのエイリアスは、VS Codeや他のエディタにも自動的に統合されます。