배포시 console.log 지우기(vite 플러그인,JS)

[ 이슈 설명 ]

로컬 환경에서는 디버깅하기 위해서 콘솔 로그가 필요하고 사용자가 보는 입장에서는 console이 뜨지 않아야함.

=> 실제 배포할 때엔 민감한 정보가 포함되어있을 수 있으므로보안을 위해서 콘솔창을 비워두는 것이 좋음, 시각적으로 좋을 것 같음.

 

[ 해결 방법 ]

 

 

1️⃣  설치할 패키지

 

vite-plugin-remove-console

 

yarn add vite-plugin-remove-console -D

 

 

2️⃣  Vite 설정 파일 수정

 

그 다음, vite.config.js 파일을 수정하여 vite-plugin-remove-console을 추가

// 위의 설정은 배포 환경에만 적용하고, 개발 환경에서는 그대로 console.log를 사용
// 조건부로 플러그인을 적용.

import { defineConfig } from 'vite';
import removeConsole from 'vite-plugin-remove-console';

export default defineConfig(({ command }) => {
  return {
    plugins: [
      command === 'build' && removeConsole({
        include: ['log', 'warn', 'error']
      })
    ]
  }
});

//command =>  빌드(build) 모드와 개발(dev) 모드를 구분하는 데 사용

//배포환경, 개발 환경 모두 적용한 경우

import { defineConfig } from 'vite';
import removeConsole from 'vite-plugin-remove-console';

export default defineConfig({
  plugins: [
    removeConsole({
      include: ['log', 'warn', 'error'] // 제거할 console 메서드를 지정합니다.
    })
  ]
});

 

이 설정을 통해, console.log, console.warn, console.error가 제거됩니다. 필요에 따라 원하는 콘솔 메서드만 제거 가능

 

 

3️⃣ 설정 적용 후 배포

 

이제 Vite 설정이 완료되었으므로, 프로젝트를 다시 빌드하고 배포.

yarn build

 

빌드된 결과물에는 설정한 console 메서드가 제거된 상태로 배포.

이렇게 하면, vite build 명령어를 사용할 때만 console.log가 제거되고, vite dev 명령어를 사용할 때는 console.log가 제거되지 않음.

[ 다른 해결책 ]

배포할 때 console 로그 막기 / 비우기 -JS

 

그 외로도 babel-plugin-transform-remove 라이브러리를 이용하는 방법도 있음.