처음 만드는 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를 사용하면 빌드 프로세스에 커스텀 처리를 쉽게 끼워 넣을 수 있다.

빌드 시점에 버전 정보나 메타데이터를 자동 생성해 두면 배포 관리와 캐시 제어가 쉬워진다.