Ma première implémentation de plugin Vite : générer automatiquement des métadonnées de build

J’ai essayé d’utiliser la Plugin API de Vite pour brancher un traitement personnalisé dans le cycle de build.

Objectif

Mieux comprendre la Plugin API.

Sujet

À l’aide d’un utilitaire qui génère une version sémantique basée sur le temps, créer et placer un fichier de métadonnées de build dans le répertoire public.

Implémentation du 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);
    },
  };
}

Points importants

1. configResolved: conserver config quand la configuration de build est finalisée
2. closeBundle: générer le fichier une fois le bundle terminé
3. config.build.outDir: référencer le répertoire de sortie de Vite

Enregistrer le plugin dans la config Vite

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

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

Résumé

Avec l’API de plugin de Vite, il est facile d’ajouter un traitement personnalisé au processus de build.

Générer automatiquement les informations de version ou les métadonnées de build facilite la gestion des déploiements et du cache.