importエイリアス

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

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

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

ノート

エイリアスのパスが解決できるようにcompilerOptions.baseUrlが設定されていることを確認してください。

設定を変更すると、開発サーバーが自動的に再起動します。これにより、プロジェクト内の任意の場所でエイリアスを使用してインポートできるようになりました。

src/pages/about/company.astro

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

これらのエイリアスは、VS Codeや他のエディタにも自動的に統合されます。