vite学习笔记-自定义构建信息打印vite插件

原创已于 2025-06-12 11:53:40 修改 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记 #python

于 2025-06-12 09:41:11 首次发布

web前端开发学习笔记专栏收录该内容

23 篇文章

订阅专栏

Vite构建信息插件详解

这个自定义Vite插件用于在构建过程中显示友好的提示信息，包括欢迎消息和构建完成后的统计信息。下面我将详细解析这个插件的实现和工作原理。

插件功能概述

该插件主要有两个核心功能：

构建开始时：显示欢迎消息
构建完成后：显示构建时间和打包大小

插件实现解析

1. 导入依赖

import type { Plugin } from "vite";
import gradient from "gradient-string";
import { getPackageSize } from "./utils";
import dayjs, { type Dayjs } from "dayjs";
import duration from "dayjs/plugin/duration";
import boxen, { type Options as BoxenOptions } from "boxen";
dayjs.extend(duration);

vite：Vite插件类型
gradient-string：用于创建渐变色文本
getPackageSize：自定义工具函数，计算打包后文件夹大小
dayjs：轻量级日期处理库，扩展了duration插件用于时间差计算
boxen：在终端创建带边框的文本框

2. 欢迎消息配置

const welcomeMessage = gradient(["cyan", "magenta"]).multiline(
  `您好! 欢迎使用文泽运维监控平台\nWelcome to the WIZ Operations Monitoring Platform`
);

const boxenOptions: BoxenOptions = {
  padding: 0.5,
  borderColor: "cyan",
  borderStyle: "round"
};

使用渐变色（cyan到magenta）创建多行欢迎消息
配置文本框选项：内边距0.5、青色边框、圆角样式

3. 插件主体结构

export function viteBuildInfo(): Plugin {
  let config: { command: string };
  let startTime: Dayjs;
  let endTime: Dayjs;
  let outDir: string;
  
  return {
    name: "vite:buildInfo",
    // ...插件钩子函数
  };
}

插件使用闭包保存以下状态：

config：Vite配置信息
startTime/endTime：构建开始/结束时间
outDir：构建输出目录

4. 插件钩子详解

(1) configResolved 钩子

configResolved(resolvedConfig) {
  config = resolvedConfig;
  outDir = resolvedConfig.build?.outDir ?? "dist";
}

在Vite配置解析完成后调用
保存解析后的配置信息
获取输出目录（默认为"dist"）

(2) buildStart 钩子

buildStart() {
  console.log(boxen(welcomeMessage, boxenOptions));
  if (config.command === "build") {
    startTime = dayjs();
  }
}

构建开始时调用
打印带边框的欢迎消息
如果是构建命令（非开发模式），记录开始时间

(3) closeBundle 钩子

closeBundle() {
  if (config.command === "build") {
    endTime = dayjs();
    return new Promise((resolve) => {
      getPackageSize({
        folder: outDir,
        callback: (size: string) => {
          const buildTime = dayjs
            .duration(endTime.diff(startTime))
            .format("mm分ss秒");
          
          const message = gradient(["cyan", "magenta"]).multiline(
            `🎉 恭喜打包完成（总用时${buildTime}，打包后的大小为${size}）`
          );
          
          console.log(boxen(message, boxenOptions));
          resolve();
        }
      });
    });
  }
}