webfunny-vite-plugin

Vite 插件，用于在构建完成后自动上传 SourceMap 到 Webfunny 监控系统。

安装

npm install webfunny-vite-plugin --save-dev

使用方法

基本用法

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { webfunnyVitePlugin } from 'webfunny-vite-plugin'

export default defineConfig({
  plugins: [
    vue(),
    webfunnyVitePlugin({
      url: 'http://your-server.com/api/sourceMapFile/upload',
      projectId: 'your-project-id',
      release: '1.0.0'
    })
  ],
  build: {
    sourcemap: true  // 必须开启 sourcemap
  }
})

完整配置

webfunnyVitePlugin({
  // 必填参数
  url: 'http://your-server.com/api/sourceMapFile/upload',  // file_server 上传地址
  projectId: 'your-project-id',                             // 项目 ID
  release: '1.0.0',                                         // 版本号
  
  // 可选参数
  projectName: 'My Project',      // 项目名称
  urlPrefix: 'https://cdn.example.com/assets/',  // CDN URL 前缀
  deleteAfterUpload: true,        // 上传后删除 .map 文件（默认 true）
  silent: false,                  // 静默模式，不输出日志（默认 false）
  include: /\.map$/,              // 包含的文件（正则或数组）
  exclude: /vendor/,              // 排除的文件（正则或数组）
})

配置项

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | ✅ | - | file_server 上传 URL | | projectId | string | ✅ | - | 项目 ID | | release | string | ✅ | - | 版本号 | | projectName | string | ❌ | '' | 项目名称 | | urlPrefix | string | ❌ | '' | CDN URL 前缀 | | deleteAfterUpload | boolean | ❌ | true | 上传后删除 .map 文件 | | silent | boolean | ❌ | false | 静默模式 | | include | RegExp \| string[] | ❌ | /\.map$/ | 包含的文件 | | exclude | RegExp \| string[] | ❌ | null | 排除的文件 |

环境变量

推荐使用环境变量管理敏感配置：

// vite.config.js
import { defineConfig } from 'vite'
import { webfunnyVitePlugin } from 'webfunny-vite-plugin'

export default defineConfig({
  plugins: [
    webfunnyVitePlugin({
      url: process.env.WEBFUNNY_UPLOAD_URL,
      projectId: process.env.WEBFUNNY_PROJECT_ID,
      release: process.env.npm_package_version,  // 使用 package.json 版本号
    })
  ],
  build: {
    sourcemap: true
  }
})

与 webpack 版本对比

本插件的 API 设计与 webfunny-webpack-plugin 保持一致，便于项目迁移：

| 功能 | webfunny-webpack-plugin | webfunny-vite-plugin | |------|------------------------|---------------------| | 配置参数 | ✅ 相同 | ✅ 相同 | | 自动上传 | ✅ afterEmit hook | ✅ closeBundle hook | | 删除 .map 文件 | ✅ 支持 | ✅ 支持 | | 静默模式 | ✅ 支持 | ✅ 支持 | | 文件过滤 | ✅ include/exclude | ✅ include/exclude |

License

ISC