배포 버전 출력하기

배포 후 테스트 할 때, 외관상 변경 점이 없는 업데이트의 경우는 반영이 마쳐진 상태인지 장담이 어려울 수 있습니다. 이 때, 배포 버전을 출력함으로써 해결이 가능합니다.

먼저 다음과 같이 package.json에서 버전을 불러와서 전역 변수로 주입합니다.

// vite.config.ts

import { defineConfig } from 'vitest/config'
import pkg from './package.json' assert { type: 'json' }

export default defineConfig({
  ...,
  define: {
    __VERSION__: `"${pkg.version}"`,
  },
})

typescript를 쓴다면 전역 변수임을 알려줍니다.

// global.d.ts

declare global {
  ...
  
  declare const __VERSION__: string
}

이제 설정은 모두 마쳤으니 브라우저 콘솔에 출력해봅시다.

const version = __VERSION__
console.log(`%cVersion: v${version}`, 'color: #7066f4')