Minha primeira implementação de plugin Vite: gerar metadados de build automaticamente

Tentei usar a Plugin API do Vite para encaixar um processamento personalizado no ciclo de build.

Objetivo

Quero entender melhor a Plugin API.

Tema

Usando um utilitário que gera versão semântica baseada em tempo, criar e posicionar um arquivo de metadados de build dentro do diretório public.

Implementação do plugin

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);
    },
  };
}

Pontos

1. configResolved: guardar config quando a configuração de build é finalizada
2. closeBundle: gerar o arquivo quando o bundle termina
3. config.build.outDir: referenciar o diretório de saída do Vite

Registrar o plugin na config do Vite

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

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

Resumo

Com a Vite Plugin API, fica fácil encaixar processamento personalizado no build.

Gerar automaticamente informações de versão e metadados no momento do build facilita a gestão de deploy e o controle de cache.