프로젝트 빌드 중 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/ko/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>

  /**
   * 상대 경로를 계산할 디렉터리를 설정합니다. sourcemaps 업로드의 상대 경로는
   * 오류가 발생한 경로에 포함되어야 합니다. 따라서 이 매개변수의 목적은
   * 업로드할 상대 디렉터리를 제어하는 것입니다.
   * 기본값: 실행 디렉터리에서 검색 디렉터리까지의 상대 경로 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,
    }),
  ],
})