RUM SourceMap Plugin

这是一个通用的前端构建插件，支持 Webpack (4.x/5.x) 和 Vite (3.x - 7.x)。它用于在打包完成后自动将生成的 .map 文件上传至腾讯云 RUM (Real User Monitoring) 监控系统，并支持上传后自动清理本地 .map 文件，以防止源码泄露。

特性

• 🚀 多构建工具支持：同时支持 Webpack 和 Vite。
• ⚡ 并发上传：支持并发上传 SourceMap 文件，提高上传效率。
• 🛡️ 安全可靠：支持上传后自动删除本地 SourceMap 文件，防止源码泄露。
• 🔄 自动重试：内置重试机制，网络波动不影响整体流程。
• 📦 版本自动识别：支持从配置、环境变量、Git Commit Hash 或 package.json 自动获取版本号。

安装

npm install rum-sourcemap-plugin --save-dev
# 或者
yarn add rum-sourcemap-plugin -D
# 或者
pnpm add rum-sourcemap-plugin -D

使用方法

Webpack

在 webpack.config.js 中引入并配置插件：

const { WebpackRumPlugin } = require("rum-sourcemap-plugin");

module.exports = {
  // ...其他配置
  devtool: "hidden-source-map", // 推荐使用 hidden-source-map，生成 .map 文件但不暴露 sourcemap URL
  plugins: [
    new WebpackRumPlugin({
      projectID: 123456, // 您的 RUM 项目 ID
      secretId: process.env.RUM_SECRET_ID, // 腾讯云 SecretId
      secretKey: process.env.RUM_SECRET_KEY, // 腾讯云 SecretKey
      version: "1.0.0", // 可选，默认自动获取
      clean: true, // 上传成功后删除本地 .map 文件
    }),
  ],
};

Vite

在 vite.config.js 中引入并配置插件：

import { defineConfig } from "vite";
import { ViteRumPlugin } from "rum-sourcemap-plugin";

export default defineConfig({
  build: {
    sourcemap: "hidden", // 推荐使用 hidden，生成 .map 文件但不暴露 sourcemap URL
  },
  plugins: [
    ViteRumPlugin({
      projectID: 123456, // 您的 RUM 项目 ID
      secretId: process.env.RUM_SECRET_ID, // 腾讯云 SecretId
      secretKey: process.env.RUM_SECRET_KEY, // 腾讯云 SecretKey
      version: "1.0.0", // 可选，默认自动获取
      clean: true, // 上传成功后删除本地 .map 文件
    }),
  ],
});

配置项

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | ------------------ | --------------- | ---- | ------------------------- | -------------------------------------------------------------------------------------------- | | projectID | Number/String | 是 | - | RUM 项目 ID（数字 ID） | | secretId | String | 是 | - | 腾讯云 CAM 访问密钥 SecretId | | secretKey | String | 是 | - | 腾讯云 CAM 访问密钥 SecretKey | | version | String | 否 | 自动获取 | 应用版本号。优先级：配置项 > 环境变量 RUM_RELEASE > Git Commit Hash > package.json version | | uploadUrl | String | 否 | rum.tencentcloudapi.com | RUM 上报接口地址 | | concurrency | Number | 否 | 3 | 上传并发数 | | clean | Boolean | 否 | true | 上传成功后是否删除本地 .map 文件 | | open | Boolean | 否 | true | 是否启用插件。设置为 false 可禁用上传（例如在开发环境） | | sourcemapPattern | String | 否 | **/*.js.map | 匹配 SourceMap 文件的 glob 模式 | | distDir | String | 否 | 自动获取 | 构建输出目录。Webpack 默认为 output.path，Vite 默认为 build.outDir |

环境变量

插件支持通过环境变量设置版本号：

• RUM_RELEASE: 设置发布版本号

注意事项

1. 权限安全：建议不要将 secretId 和 secretKey 硬编码在代码中，而是通过环境变量注入，以保证密钥安全。
2. SourceMap 配置：
   • Webpack 建议设置 devtool: 'hidden-source-map'。
   • Vite 建议设置 build.sourcemap: 'hidden'。
   • 这样可以生成 SourceMap 文件用于上传，但生成的 JS 文件中不会包含指向 SourceMap 的注释，避免浏览器尝试加载 SourceMap 导致 404 或泄露源码结构。
3. 删除策略：默认情况下 clean: true，上传成功后会删除本地 .map 文件。如果您需要保留本地文件用于其他用途，请设置 clean: false。

License

MIT

开发与构建

本项目使用 Rollup 进行构建。

1. 安装依赖：

   npm install

2. 构建项目：

   npm run build

   构建产物将输出到 dist/ 目录。