コンテンツにスキップ

importエイリアス

エイリアスは、インポートのためのショートカットを作成する方法です。

エイリアスは、多くのディレクトリや相対的なインポートを持つコードベースにおいて、開発体験を改善するのに役立ちます。

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

この例では、開発者はsrc/pages/about/company.astrosrc/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や他のエディタにも自動的に統合されます。