[Vite] Custom Plugin

Offical plugins: https://cn.vitejs.dev/plugins/

Commuity plugins: https://github.com/vitejs/awesome-vite#plugins

Rollup plguins: https://vite-rollup-plugins.patak.dev/

 

 

Hello Wrold plugin

// filename: vite-plugin-test.js

import { Plugin } from "vite";
export default function testPlugin(): Plugin {
  return {
    name: "vite-plugin-test",
    // Vite provided hook, read initial config
    config(config, configEnv) {
      console.log("~ config:");
    },
    // Vite provided hook, read resolved config
    configResolved(config) {
      console.log("~ configResolved:");
    },
    // General hook
    options(opts) {
      console.log("~ options");
    },
    // Vite provided hook, for dev server
    configureServer(server) {
      console.log("~ configureServer");
    },
    // General hook
    buildStart(options) {
      console.log("~ buildStart");
    },
    buildEnd() {
      console.log("~ buildEnd");
    },
  };
}

Those will print in order, according to the hook lifecycle.

 

vite.config.ts

import testPlugin from "./plugins/vite-plugin-test";

export default defineConfig({
  plugins: [
    vue(),
    testPlugin(),
  ],
});

 

Example 2: Build time

import { ResolvedConfig } from "vite";
export default function viteBuildTimePlugin() {
  let config: ResolvedConfig | undefined;
  let startTime: number;
  return {
    name: "vite-plugin-build-time",
    configResolved(resolvedConfig: ResolvedConfig) {
      console.log(resolvedConfig);
      config = resolvedConfig;
    },
    buildStart() {
      if (config!.command === "build") {
        console.log("Build started");
        startTime = Date.now();
      }
    },
    closeBundle() {
      if (config && config!.command === "build") {
        console.log("Build completed in", Date.now() - startTime, "ms");
      }
    },
  };
}

 

Example 3: html related

import { Plugin } from "vite";

export default function viteHtmlTitlePlugin({ title = "" }): Plugin {
  return {
    name: "vite-plugin-html-title",
    enforce: "pre", // apply before Vite plugins
    apply: "serve", // only apply this plugin in development mode
    transformIndexHtml(html) {
      return html.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`);
    },
  };
}

 

Example 4: Virtual modules

import { Plugin, ResolvedConfig } from "vite";
import stringify from "json-stringify-safe";

type Module = {
  [key: `virtual:${string}`]: (config?: ResolvedConfig) => string;
};

const modules: Module = {
  "virtual:fib": () => `export default function fib(n) {
    if (n <= 1) return n;
    return fib(n - 1) + fib(n - 2);
        }`,
  "virtual:config": (
    config?: ResolvedConfig
  ) => `export default function getConfig() {
        return ${stringify(config)}
    }`,
};

const prefix = "virtual:";
let config: ResolvedConfig;
export default function viteDynamicVirtualModulePlugin(): Plugin {
  return {
    name: "vite-plugin-dynamic-virtual-module",
    configResolved(resolvedConfig) {
      config = resolvedConfig;
    },
    resolveId(id) {
      if (id.startsWith(prefix)) {
        return `${id}`;
      }
    },
    load(id) {
      if (id.startsWith(prefix)) {
        // @ts-ignore
        return modules[`${id}`](config);
      }
    },
  };
}

Usage:

import vfib from 'virtual:fib'
import vconfig from 'virtual:config'
console.log(vconfig())
console.log(vfib(10))