初めてのViteプラグイン実装: ビルドメタデータを自動生成する

ViteのPlugin APIを使って、Viteのビルドライフサイクルに独自の処理を組み込んでみる。

目的

Plugin APIの理解を深めたい。

題材

時刻ベースのセマンティックバージョンを生成するユーティリティを使って、publicディレクトリにビルドメタデータファイルを作成・配置する。

プラグイン実装

import { Plugin, ResolvedConfig } from "vite";
import { writeFile } from "node:fs/promises";
import { timeBasedSemanticVersion } from "./utils";

export function myPlugin(): Plugin {
  let config: ResolvedConfig;

  return {
    name: "my-plugin",
    configResolved(c) {
      config = c;
    },
    closeBundle() {
      const path = `${config.build.outDir}/version.json`;
      const jsonStr = JSON.stringify({
        ts: Date.now(),
        version: timeBasedSemanticVersion(),
      });

      writeFile(path, jsonStr);
    },
  };
}

ポイント

configResolved: ビルド設定が確定したタイミングでconfigを保存
closeBundle: バンドルが完了したタイミングでファイルを生成
config.build.outDir: Viteの出力ディレクトリを参照

Vite Configでプラグインを登録

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { myPlugin } from "./my-plugin.ts";

export default defineConfig({
  plugins: [svelte(), myPlugin()],
});

まとめ

Vite Plugin APIを使えば、ビルドプロセスに独自の処理を簡単に組み込める。

ビルド時にバージョン情報やメタデータを自動生成することで、デプロイ管理やキャッシュ制御が容易になる。