https://github.com/atqq/vite-plugin-monitor
vite-plugin-monitor
https://github.com/atqq/vite-plugin-monitor
Last synced: about 2 months ago
JSON representation
vite-plugin-monitor
- Host: GitHub
- URL: https://github.com/atqq/vite-plugin-monitor
- Owner: ATQQ
- Created: 2021-09-26T15:45:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-19T05:54:36.000Z (over 3 years ago)
- Last Synced: 2025-03-13T09:02:02.743Z (2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-monitor
- Size: 66.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-monitor
提供获取Vite的**启动**，**HMR**时间等简单指标，拦截 **--debug** 下的所有日志的能力
## 使用
### 安装依赖
```sh
npm install vite-plugin-monitor --dev
# or
yarn add vite-plugin-monitor --dev
# or
pnpm add -D vite-plugin-monitor
```
### 激活插件
**vite.config.js**
```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`或者完整的功能支持
```json
{
"scripts":{
"serve":"vite --debug"
}
}
```
## 参数描述
| 参数名 | 类型 | 示例 | 说明 |
| :-----: | :------: | :---: | :---------------------------------: |
| log | Boolean | false | 设置为true将不会打印--debug下的日志 |
| monitor | Function | - | 默认回调 |
| debug | Function | - | debug回调--拦截debug行为 |
## 完整定义
```ts
/**
* 插件参数
*/
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
```