[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))

 

posted @   Zhentiw  阅读(1)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2024-02-18 [Go] Filter an Array in Go
2024-02-18 [Go] Declare Arrays and Slices in Go
2023-02-18 [CSS 3] Gap
2023-02-18 [React] Scaffold a React application with pnpm and vite
2023-02-18 [Typescript] Creating a Dynamic Function with Variable Arguments
2020-02-18 [Javascript] Primitive value are immutable
2020-02-18 [ML] 2. Introduction to neural networks
点击右上角即可分享
微信分享提示