納品コードの整形

pluginBeautify()はビルド結果のHTML・CSS・JavaScriptを整形します。まずHTMLだけを読みやすくし、必要に応じてCSS・JavaScriptも整える手順を紹介します。

整形は納品物を確認・編集しやすくするための機能です。改行や空白によってファイルサイズが増えるため、配信容量を優先するサイトでは対象を選んで使います。

Table of Contents

HTMLだけを整形する

srcで対象をHTMLに絞ります。この構成では、CSS・JavaScriptの出力設定を変える必要はありません。

vite.config.ts
import { defineConfig, pluginSsg, pluginBeautify } from "minista"

export default defineConfig({
  plugins: [pluginSsg(), pluginBeautify({ src: ["**/*.html"] })],
})

npm run buildを実行し、dist/index.htmlを開きます。ビルド後のHTMLにインデントと改行が付きます。ソースのJSX・TSXを変更する機能ではありません。

整形後のHTMLの例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My Site</title>
  </head>
  <body>
    <h1>My Site</h1>
  </body>
</html>

インデントを変更する

HTMLの設定はhtmlOptionsへ渡します。例えばインデント幅を4にできます。

pluginBeautify({
  src: ["**/*.html"],
  htmlOptions: { indent_size: 4 },
})

HTML・CSS・JavaScriptの各設定には、js-beautifyのオプションを利用できます。型と既定値はpluginBeautifyを参照してください。

CSS・JavaScriptも整形する

対象を省略するとHTML・CSS・JavaScriptを整形します。CSSはハッシュのないファイル名にし、JavaScriptはRolldownの出力段階で圧縮を無効にします。

vite.config.ts
import { defineConfig, pluginSsg, pluginBeautify } from "minista"

export default defineConfig({
  plugins: [pluginSsg(), pluginBeautify()],
  build: {
    sourcemap: false,
    cssMinify: false,
    rolldownOptions: {
      output: {
        minify: false,
        assetFileNames: "assets/[name][extname]",
      },
    },
  },
})

build.minify: falseだけでは、Rolldownの後段のdce-only処理（不要コードの除去）が残ります。JavaScriptを整形する場合、この処理との併用はMINISTA_BEAUTIFY_MINIFY_UNSUPPORTEDで停止するため、build.rolldownOptions.output.minify: falseを指定します。詳しくは設定リファレンスの「圧縮を無効にする」を参照してください。

CSSの整形は出力名が確定した後に行うため、CSSを対象にする場合はassetFileNamesに[hash]や関数形式を使えません。JavaScriptのエントリー・チャンクにはハッシュを使えます。

出力と制約を確認する

プロジェクト構成の例
src/
├── assets/
│   ├── styles.css
│   └── scripts.ts
└── pages/
    └── index.tsx
ビルド結果の例
dist/
├── index.html                ← HTMLを整形
└── assets/
    ├── styles.css            ← CSSを整形
    └── scripts-[hash].js     ← JavaScriptを整形

実際のファイル名は読み込み方と出力設定によります。整形対象のCSS・JavaScriptとソースマップは併用できません。ソースマップが必要な場合は、そのファイルを対象から外してHTMLだけを整形します。

ファイル名のハッシュを外した場合は、同名ファイルの衝突や公開先のキャッシュ更新方法も確認します。

次は納品用アーカイブで、成果物をZIPにまとめます。

前のページHTMLコメント
次のページ納品用アーカイブの生成