togami2864

Saturday, Dec. 11 2021

astroのプロジェクトでaliasを設定する

@togami2864

Astro v0.21.0にてViteによる新たなビルドエンジンが提供されました。 そのため、Viteが提供しているaliasの設定をastroのプロジェクトでも行うことができます。 ReactやVueのプロジェクトにおける Vite での alias の設定方法と何も変わりません。たったの2ステップです。

  1. astro.config.mjs の Vite の項目で alias を設定
  2. エディタのサポートを有効にするため tsconfig.json の paths を設定

config設定

srcディレクトリを@で参照できるように設定してみます。

1: astro.config.mjsのvite配下にて以下のように記述します。

import path from 'path';
/** @type {import('astro').AstroUserConfig} */
export default {
  vite: {
    resolve: {
      alias: {
        '@/*': path.join(
          path.dirname(new URL(import.meta.url).pathname),
          './src'
        ),
      },
    },
  },
};

path.dirname(new URL(import.meta.url).pathname)というちょっと見慣れない記法がありますが、簡単に言うとESModulesにおける__dirnameに当たるものです。astro.config.mjsの拡張子はデフォルトでmjsです。

ESModulesではグローバル変数__dirnameが使えなくなるため、このように書いています。

2: もしもVSCodeを使っているならtsconfig.jsonのpathsにaliasを定義してインテリセンスを有効にしましょう。

{
  "compilerOptions": {
    ......
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

結果

以上の設定を終えると次のようにコンポーネントのimportができるようになります。

import { Button } from '@/components/Button.astro'

// src
//  |- components
//         | - Button.astro <- you can get it!!
Back to Home