项目信息日志插件

该项目旨在于构建阶段自动处理项目中的日志输出。其核心功能包括：自动注入包信息：在构建后运行时，控制台会自动输出项目的 Package 信息，以便开发者确认版本与构建来源。自动识别与替换 console 调用：在不影响原有日志内容与结构的前提下，对日志输出进行增强。附加上下文信息：为每条日志自动添加 Package 名称 与 时间戳，方便快速定位日志来源与时间。

功能

• 自动注入包信息；
• 自动收集项目信息；
• 自动处理 console 替换 console 内的内容为格式化以后的内容；
• 支持 log warn error

使用

1. 安装

pnpm add -D vite-plugin-styled-log

2. 作为 vite 插件实用。

// vite.config.ts
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import { resolve } from 'path'
import { styledLogVitePlugin } from 'vite-plugin-styled-log'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'LibDemo',
      fileName: 'lib-demo',
      formats: ['es', 'umd'],
    },
    sourcemap: true,
    modulePreload: {
      polyfill: false,
    },
    target: 'esnext',
  },
  plugins: [
    dts({
      insertTypesEntry: true,
      rollupTypes: true,
    }),
    styledLogVitePlugin(),
  ],
})

3. 作为 tsup 插件实用

import path from 'path'
import { defineConfig } from 'tsup'
import { copy } from 'esbuild-plugin-copy'
import { dependencies } from './package.json'
import { styledLogTsupPlugin } from 'vite-plugin-styled-log'

export default defineConfig((options) => {
  const isProd = options.env?.NODE_ENV === 'production'
  return {
    entry: ['src/index.ts'], // 入口文件
    format: ['esm'], // 输出格式，可选 esm, cjs, iife
    dts: true, // 生成类型声明
    sourcemap: !isProd, // 是否生成 source map
    clean: true, // 打包前清理输出目录
    minify: isProd, // 是否压缩
    target: 'esnext', // 输出的 JS 版本
    outDir: 'dist', // 输出目录
    tsconfig: './tsconfig.json',
    external: Object.keys(dependencies),
    esbuildOptions(options) {
      options.legalComments = 'none' // 移除法律注释
    },
    esbuildPlugins: [styledLogTsupPlugin()],
    define: {
      'process.env.NODE_ENV': JSON.stringify(options.env?.NODE_ENV),
    },
  }
})

配置

插件的完整配置信息如下：

interface CustomStyle {
  badge?: [string, string, string] | null
  log?: [string, string] | null
  warn?: [string, string] | null
  error?: [string, string] | null
}

interface LoggerOptions {
  customStyle?: CustomStyle
  enable?: boolean
  ignore?: (string | RegExp)[]
  logLevel?: 'log' | 'warn' | 'error'
}

自定义样式：

• badge 指定项目信息的样式，由 项目名称 和 版本 以及可能的 homepage 组成，因此你需要设置这3部分的样式；
• log 指定 log 信息样式，由 项目名称 和 时间戳 组成，因此你需要设置这2部分的样式；
• warn 指定 warn 信息样式，同上；
• error 指定 error 信息样式，同上；

是否启用：

• enable 指定是否启用，默认 true

忽略文件：

• ignore: 指定忽略的文件路径或正则表达式，默认忽略 /node_modules/ 和 /dist/,如果用户传入了 ignore，则会替换默认的忽略路径。

日志级别：

logLevel 设置日志级别，默认log，各个级别对应关系如下：

| logLevel | 支持的日志方法 | | :------: | -------------------- | | log | log warn error | | warn | warn error | | error | error |

配置示例

import { styledLogTsupPlugin } from 'vite-plugin-styled-log'

// 使用插件
styledLogTsupPlugin({
  customStyle: {
    badge: [
      'font-size:13px;background:#005CAF;padding:3px 10px;font-weight:bold;color:#fff;border-radius:2px 0 0 2px;',
      'font-size:13px;background:#e0f2fe;padding:3px 10px;font-weight:bold;color:#0369a1;border-radius:0 2px 2px 0;',
      'color:CanvasText;padding-left:50px;',
    ],
    log: [
      'background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); color: white; padding: 2px 8px; border-radius: 2px 0 0 2px; font-weight: bold;',
      'background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 0; font-size: 1em;',
    ],
  },
})

最终效果

console.log('hello')
// 替换为
console.log(...l('hello'))

console.warn('warn')
// 替换为
console.warn(...w('warn'))

console.error('error')
// 替换为
console.error(...e('error'))

关于自定义样式

自定义样式使用的是浏览器控制台的 CSS 样式语法，可以通过设置不同的 CSS 属性来改变日志输出的外观。例如，可以使用 background 设置背景颜色，使用 color 设置文本颜色，使用 padding 设置内边距等。通过合理搭配这些样式，可以使日志输出更加美观和易读。但是控制台并不能支持所有的 CSS 属性，因此建议使用常见且被广泛支持的样式属性。 详细的 CSS 样式属性可以参考 为控制台消息设置样式。

自定义样式的最佳实践

在自定义样式时，建议遵循以下最佳实践：

1. 保持简洁：避免使用过于复杂的样式，以免影响日志的可读性。
2. 使用对比色：选择与背景颜色形成对比的文本颜色，以确保日志内容清晰可见。
3. 差异性：不同等级的日志使用不同的样式，便于识别和区分不同类型的日志信息。
4. 测试效果：在不同的浏览器中分别测试亮色主题和暗色主题的样式，确保其兼容性和效果。

常见问题

问题一、 No overload matches this call. The last overload gave the following error. Type 'Plugin' is not assignable to type 'PluginOption'.

解决方法：

方法一: 在 vite.config.ts 中将插件强制转换为 Plugin 类型：

import type { Plugin } from 'vite'
// 其他代码省略
plugins: [styledLogVitePlugin() as Plugin]

方法二: 升级 vite 至最新版本，升级 @types/node至 ^22.10.0 版本以上。

Known Issues

• 该插件通过动态注入格式化后的 console，会导致 Sourcemap 映射不准确，有一行的偏差，建议在开发环境中禁用该插件。