Astro

Reference

• 話題の最新フロントエンドフレームワーク「Astro」を使ってみた #React - Qiita

ハマりどころ

パスエイリアスの設定

• Astro はビルドツールとして内部的にViteを使用している
• そのため、パスエイリアスやビルドの設定を行う際には Viteの設定ファイルを編集する必要がある

エイリアスパスの設定例

astro.config.mjs

import { defineConfig } from 'astro/config';
import path from 'path';

export default defineConfig({
  vite: {
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
        '@layouts': path.resolve(__dirname, 'src/layouts'),
        '@pages': path.resolve(__dirname, 'src/pages'),
      },
    },
  },
});

tsconfig.json

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