Astroをビルド後もいじいじしたい話

Astroで作ったプロジェクトにて、ビルド後のファイルに変更を加えたり内容を確認したりすることがあります。そうなった際ファイルに改行がなかったり階層分けされていなかったりしたらとても不便です。
私は不便だった場合もありました。(ありません)

Viteの設定

まずは設定で改行ありにします。改行とインデントがあるだけでコードはとても読みやすいです。早速astro.config.mjsに以下のように追記します。

export default defineConfig({
  vite: {
    build: {
      minify: false,
    },
  },
  compressHTML: false,
}

このようにすることで、minify: falseによってCSSやJSなどのファイルの改行が追加されます。どちらかというと、改行を消す処理をなくす設定ですね。

Compressの設定

@playform/compressも改行を無くす処理をするので、使用している場合は特定のファイルのみ処理しないように設定します。

  integrations: [
    playformCompress({
      CSS: false,
      HTML: false,
      JavaScript: false,
    }),
  ],

今回はHTML,CSS,JSの改行を見たいので、上のような設定がいいです。場合によって変更しましょう。

黒魔術(おまけ)

これで正しく改行ありのファイルが生成されるはずですが、なぜかHTMLファイルのみ改行がほとんどなく、数行に収まっています。
調べてみましたが解決策なるものは見つからず、結果的にPrettierで強制的に整形することにしました。悪手であることに間違いありませんので、正しい方法を現在模索中です。

scripts追加

packages.jsonに以下の内容を加えます。

"scripts": {
  "build": "astro check && astro build && prettier --write ./dist/**/*.html",
},

ignoreファイル

これだけだとdistディレクトリが.gitignoreに含まれている影響でPrettierはdistディレクトリを整形できません。なので.gitignoreをコピーして.prettierignoreを作成し、そこからdistディレクトリの指定を削除します。
なぜか.gitignoreが優先されてしまうので、先程のPrettierコマンドの最後に--ignore-path .prettierignoreと引数を増やすことで、ようやくdistディレクトリを整形できます。

"scripts": {
-  "build": "astro check && astro build && prettier --write ./dist/**/*.html",
+  "build": "astro check && astro build && prettier --write ./dist/**/*.html --ignore-path .prettierignore",
},

階層分け

次にファイルの階層分けをします。今の時点でも十分扱いやすいですが、プロジェクトが大きくなってくるとわかりにくくなります。
そのためにastro.config.mjsの中のvite.buildに以下の設定を加えてください。

rollupOptions: {
  output: {
    assetFileNames: (info) => {
      if (!info.name) return 'assets/[name]-[hash][extname]';

      const ext = info.name.split('.').at(-1)?.toLowerCase();

      const map = {
        images: ['png', 'jpg', 'jpeg', 'svg', 'gif', 'webp', 'avif', 'ico'],
        css: ['css', 'scss'],
        fonts: ['woff', 'woff2', 'ttf', 'otf'],
      };

      const category = Object.keys(map).find(key => map[key].includes(ext)) || "";

      const path = category ? `${category}/[name]-[hash][extname]` : '[name]-[hash][extname]';

      return `assets/${path}`;
    },
  },
},

諸注意としてこれらの設定をするとビルド後のファイルサイズが多少増加してしまいます。

これにより認識したファイル形式によってディレクトリ整理がされます。この設定は私がサクッと作ったもので、決して常用しているわけではないのでバグ等にご注意ください。