参考

Vite 插件

源代码
为任何基于 Vite 的框架提供构建时优化。自动初始化、调试剥离、源代码位置注入,以及可选的自动导入。

evlog/vite 插件为任何基于 Vite 的项目添加了构建时的 DX 特性。它适用于 SvelteKit、Hono、Express、Fastify、Elysia,以及任何使用 Vite 作为构建工具的框架。

Nuxt 用户:这些功能已通过 stripsourceLocation 选项集成到 evlog/nuxt 模块中。你无需单独安装 Vite 插件。

快速开始

1. 安装

pnpm add evlog

2. 添加到 vite.config.ts

vite.config.ts
import { defineConfig } from 'vite'
import evlog from 'evlog/vite'

export default defineConfig({
  plugins: [
    evlog({
      service: 'my-api',
      environment: 'production',
    }),
  ],
})

就这样。插件会自动:

  • 在编译时初始化日志记录器(无需调用 initLogger()
  • 从生产构建中剥离 log.debug() 调用

特性

vite plugin · build-time transform·DEVELOPMENT
src/checkout.tssource
1import { log } from 'evlog'
2initLogger({ env: { service: 'checkout' } })
3
4log.debug('checkout', 'building cart from session')
5log.info('checkout', 'cart built')
6log.info({ action: 'checkout', total: 99 })
7log.debug('checkout', 'starting payment')
8log.info({ action: 'paid', amount: 99 })
dist/checkout.jsawaiting build
1import { log } from 'evlog'
2initLogger({ env: { service: 'checkout' } })
3
4log.debug('checkout', 'building cart from session')
5log.info('checkout', 'cart built')
6log.info({ action: 'checkout', total: 99 })
7log.debug('checkout', 'starting payment')
8log.info({ action: 'paid', amount: 99 })
run vite build to transform
log.debug stripped
__source injected
initLogger()manual

该插件会在构建时转换你的源代码——log.debug() 调用会从输出中删除,__source: 'file:line' 会注入到对象形式的日志调用中,而 initLogger() 则通过 Vite 的 define 钩子接入,因此你无需手动调用它。

自动初始化

该插件通过 Vite 的 define 钩子在编译时注入日志记录器配置。serviceenvironmentprettysilentenabledsampling 选项会在构建时被序列化并注入,因此 logcreateLogger()createRequestLogger() 无需调用 initLogger() 即可立即工作。

调试剥离

默认情况下,所有 log.debug() 调用都会从生产构建中移除。这是一个编译时的转换,调用会被完全消除,而不仅仅是静音。

vite.config.ts
evlog({
  service: 'my-api',
  // 默认:在生产构建中剥离调试日志
  // strip: ['debug'],

  // 在生产环境中剥离调试和 info:
  // strip: ['debug', 'info'],

  // 禁用剥离:
  // strip: [],
})

剥离仅在 vite build 时激活(不会在 vite dev 时)。

源代码位置注入

启用后,插件会在对象形式的日志调用中注入 __source: 'file:line',让你准确知道每条日志来自哪个文件和行号。

vite.config.ts
evlog({
  service: 'my-api',
  sourceLocation: true,      // 始终注入
  // sourceLocation: 'dev',  // 仅在开发环境注入
})

自动导入(可选)

自动检测并导入 evlog 符号(logcreateEvlogErrorparseError 等),无需手动写入导入语句。默认禁用。

vite.config.ts
evlog({
  service: 'my-api',
  autoImports: true,
})

启用后,插件会:

  1. 扫描代码中的 evlog 符号
  2. 自动添加正确的 import 语句
  3. 为 TypeScript 生成 .d.ts 文件
自动导入的错误构造函数是 createEvlogError,而不是 createError。这可以避免与框架内置的 createError(如 Nuxt、Nitro、h3)发生冲突。独立的 createError 仍可通过显式导入从 evlog 获取。

客户端注入

当提供 client 选项时,插件会将 <script> 标签注入到 HTML 页面中,以初始化客户端侧的日志记录器。这使得 log.info()log.error() 等方法可在浏览器代码中使用。

vite.config.ts
evlog({
  service: 'my-api',
  client: {
    console: false,
    transport: {
      enabled: true,
      endpoint: '/api/_evlog/ingest',
    },
  },
})

配置

选项类型默认值描述
servicestring'app'日志中的服务名称
environmentstring自动检测环境名称
prettyboolean开发环境下为 true美化日志输出
silentbooleanfalse抑制控制台输出
enabledbooleantrue启用/禁用所有日志记录
stripLogLevel[]['debug']从生产构建中移除的日志级别
sourceLocationboolean | 'dev'false将源代码文件:行注入日志调用
autoImportsbooleanfalse自动导入 evlog 符号
clientobject客户端注入配置(consoletransport
samplingobject头部/尾部采样率

Nuxt 集成

Nuxt 模块直接将 stripsourceLocation 暴露在 nuxt.config.ts 中:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['evlog/nuxt'],
  evlog: {
    env: { service: 'my-app' },
    strip: ['debug'],           // 默认值
    sourceLocation: 'dev',      // 仅在开发环境注入
  },
})

Vite 兼容性

该插件支持 Vite 7+,并针对 Vite 8(使用 Rolldown)进行了优化。在 Vite 8 上,转换钩子使用原生的 Rolldown filtermoduleType,以获得最佳性能。不匹配的文件完全在 Rust 端跳过,不会通过 JS 桥接。