vite-plugin-monitor
提供获取Vite的启动,HMR时间等简单指标,拦截 --debug 下的所有日志的能力
使用
安装依赖
npm install vite-plugin-monitor --dev
# or
yarn add vite-plugin-monitor --dev
# or
pnpm add -D vite-plugin-monitor
激活插件
vite.config.js
import { defineConfig } from 'vite'
import vitePluginMonitor from 'vite-plugin-monitor'
export default defineConfig({
plugins: [
vitePluginMonitor({
// log: false,
monitor(label, time, originData) {
const {
time1, time2, originValue, chalkValue,
} = originVal
console.log(originValue)
console.log(chalkValue)
console.log(label, time1, time2, `${time}ms`)
},
debug(str) {
// 打印完整日志
// process.stdout.write(str)
},
}),
],
})
效果示例
启动说明
在启动参数中加入--debug
或者完整的功能支持
{
"scripts":{
"serve":"vite --debug"
}
}
参数描述
参数名 | 类型 | 示例 | 说明 |
---|---|---|---|
log | Boolean | false | 设置为true将不会打印--debug下的日志 |
monitor | Function | - | 默认回调 |
debug | Function | - | debug回调--拦截debug行为 |
完整定义
/**
* 插件参数
*/
export interface PluginOptions {
/**
* 是否在终端中输出原来的日志
*/
log?: boolean
/**
* 默认回调
*/
monitor?: MonitorCallback
/**
* debug回调
*/
debug?:DebugCallback
}
/**
* 原来的日志
*/
export interface OriginDat{
/**
* debug日志中的第一个时间(xxms)
*/
time1?:number
/**
* debug日志中的第二个时间(+xxms)
*/
time2?:number
/**
* debug打印的原始内容
*/
originValue?: string;
/**
* debug打印的原始内容(带颜色)
*/
chalkValue?: string;
}
/**
* 默认回调函数,对日志做了简单处理
* @param label 日志类型
* @param time 消耗时间(time1+time2)
* @param origin 原日志相关内容
*/
export type MonitorCallback = (label:string, time: number, origin?:OriginDat) => void
/**
* 拦截debug都打印日志的回调函数
*/
export type DebugCallback = (...argvs:string[]) => void