Viteプラグインを実装してみる

ゴール

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

目的

Plugin APIの理解を深めたい

題材

「JavaScriptで時刻ベースのセマンティックバージョンを生成する」を使って、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);
     }
  }
}

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()],
})