Meine erste Vite-Plugin-Implementierung: Build-Metadaten automatisch erzeugen

Ich habe ausprobiert, mit der Plugin API von Vite eigene Verarbeitung in den Build-Lebenszyklus einzuhängen.

Ziel

Ich möchte die Plugin API besser verstehen.

Thema

Mit einem Utility, das zeitbasierte semantische Versionen erzeugt, wird eine Build-Metadatendatei im public-Verzeichnis erzeugt und abgelegt.

Plugin-Implementierung

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

Wichtige Punkte

1. configResolved: config speichern, sobald die Build-Konfiguration feststeht
2. closeBundle: Datei erzeugen, wenn das Bundling abgeschlossen ist
3. config.build.outDir: Auf das Ausgabeverzeichnis von Vite zugreifen

Plugin in der Vite-Konfiguration registrieren

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

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

Zusammenfassung

Mit der Vite Plugin API lässt sich eigene Logik einfach in den Build-Prozess einbauen.

Wenn Versionsinformationen oder Metadaten automatisch beim Build erzeugt werden, werden Deployment-Verwaltung und Cache-Steuerung leichter.