プロジェクトビルド中に SourceMap をアップロードする¶

npm install @cloudcare/vite-plugin-sourcemap --save-dev

yarn add @cloudcare/vite-plugin-sourcemap --dev

pnpm add @cloudcare/vite-plugin-sourcemap --save-dev

// vite.config.ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { SourceMapUploadVitePlugin } from "@cloudcare/vite-plugin-sourcemap"
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true, // Source map の生成を有効にする必要があります
  },
  plugins: [
    vue(),

    SourceMapUploadVitePlugin({
      applicationId: "xxxxx", //  Guance アプリケーション appid
      apiKey: "xxxxxxxx", // open apikey
      server: "https://console.xx-xxx.cn", // サイトに対応する openapi アドレス
      filepaths: ["dist/"], // 検索するディレクトリ。ファイルまたはディレクトリを指定できます
      logLevel: "verbose", // ログ出力レベル
      //   root: 'dist/', // アップロードする相対ディレクトリに対応するルートディレクトリ
      env: "production", // Guance アプリケーションの env
      version: "1.0.0", // Guance アプリケーションの version
    }),
  ],
})

interface Options {
  /**
   *
   * sourcemap を検索するファイル/ディレクトリ。
   * "extensions 設定" リストに一致し、"ignore 設定" に一致しないすべてのファイルが検索されます。
   * sourcemap JSON または `//#sourceMappingURL=` コメントを検索し、生成されたファイルとソースマップのペアを見つけ出し、ソースマップをアップロードします。
   */
  filepaths: Array<string> | string

  /**
   * Guance プラットフォームで生成された openApi Key。生成方法については（https://docs.guance.com/ja/management/api-key/open-api/#_1）を参照してください。
   */
  apiKey: string

  /**
   * Guance プラットフォームの OpenAPI サービス
   */
  server: string
  /**
   * Guance RUM アプリケーションに対応する applicationId（必須）
   */
  applicationId: string
  /**
   * Guance RUM アプリケーションに対応する version（任意）
   */
  version?: string
  /**
   * Guance RUM アプリケーションに対応する env（任意）
   */
  env?: string

  /**
   * 条件に一致するすべてのファイルを検索しますが、アップロードは行いません。デバッグに使用できます。
   */
  dryRun?: boolean
  /**
   * アップロード後、見つかったすべてのソースマップファイルを削除します。
   */
  deleteAfterUpload?: boolean
  /**
   * ソースマップが sourceMappingURL を介して生成されたファイルと一致しない場合、ローカルディスク上のファイル名で一致を試みます。
   */
  matchSourcemapsByFilename: ?boolean

  /**
   * ディレクトリ内で検索するファイルの拡張子リスト。
   * デフォルトは [".js", ".map"]。
   */
  extensions?: Array<string>

  /**
   * 無視するファイルのリスト。
   */
  ignore?: Array<string>

  /**
   * 相対パスを計算する基準となるディレクトリを設定します。アップロードされるソースマップの相対パスには、エラーが発生したパスが含まれている必要があります。そのため、
   * このパラメータはアップロードされる相対ディレクトリを制御することを意味します。
   * デフォルトは、実行ディレクトリから検索ディレクトリへの相対パス path.relative(process.cwd(), filepath) です。
   */
  root?: string
  /**
   * デバッグ時に使用する、出力されるログのレベルです。
   */
  logLevel?: "quiet" | "normal" | "verbose"
  /**
   * 実行に失敗した場合にエラーを無視するかどうか。この設定により、エラーが発生してもコンパイルプロセスが中断されないことを保証します。デフォルトは false、つまり通常通りエラーがスローされます。
   */
  warnOnFailure?: boolean
}

// vite.config.ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { SourceMapUploadVitePlugin } from "@cloudcare/vite-plugin-sourcemap"
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: "hidden", // Source map の生成を有効にする必要があります
  },
  plugins: [
    vue(),

    SourceMapUploadVitePlugin({
      applicationId: "xxxxx", //  Guance アプリケーション appid
      apiKey: "xxxxxxxx", // open apikey
      server: "https://console.xxx-xxx.cn",
      filepaths: ["dist/"], // 検索するディレクトリ。ファイルまたはディレクトリを指定できます
      logLevel: "verbose", // ログ出力レベル
      //   root: 'dist/', // アップロードする相対ディレクトリに対応するルートディレクトリ
      env: "production", // Guance アプリケーションの env
      version: "1.0.0", // Guance アプリケーションの version
      deleteAfterUpload: true,
      matchSourcemapsByFilename: true,
    }),
  ],
})