console.log()를 개발환경에서는 유지하고 배포환경에서는 제거하는 방법

Webpack, Babel 환경에서 console.log()가 개발환경에서는 출력되고 배포단계에서는 제거할 수 있는 방법과 그 과정에서 겪은 문제 해결을 소개하는 글이다.

미리보는 결론

먼저 Webpack 환경에서는 개발환경인지 배포환경인지 구분하는 process.env.NODE_ENV 값이 없다.
따라서 package.json 파일의 scripts 실행 정의에서 NODE_ENV 값을 전달해줘야한다.

이를 기반으로 console.log() 가 개발환경에서는 동작하고 빌드환경에서는 동작하지 않게하는 방법은 다음과 같다.

1. 빌드시 console.log() 를 제거해주는 Babel의 babel-plugin-transform-remove-console 플러그인 설치

npm i babel-plugin-transform-remove-console

2. package.json의 scripts 실행 정의에서 개발, 빌드환경에 따라 환경변수 NODE_ENV 값을 다르게 전달

// package.json
{
  "scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --mode development",
    "build": "NODE_ENV=production webpack"
  }
}

3. Babel 설정 파일(.babelrc 파일 또는 babel.config.js 파일) 에서 환경변수 NODE_ENV 값에 따라 플러그인이 조건부 동작할 수 있도록 설정

// babel.config.js
// 개발, 빌드환경에 따라 console.log를 제거해주는 플러그인 조건부 동작
module.exports = {
    plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
}

---

배경

React, Babel, Webpack을 사용한 프로젝트이며 개발환경은 webpack-dev-server 을 사용했고 빌드환경은 webpack을 사용했다.

이때 개발환경에서는 console.log()가 브라우저에 출력되고 빌드 후 배포된 환경에서는 출력되지 않게하는 방법을 찾고있었다.

해결과정

https://gitabout.com/3
해당 게시글의 도움을 받아 Babel의 babel-plugin-transform-remove-console 플러그인을 사용하면 WebPack 빌드 시 console.log()를 자동으로 제거할 수 있음을 알았다.

하지만 나의 환경에서 라이브러리 자체는 잘 작동했지만 개발, 빌드환경에 따른 조건부 실행은 작동하지 않았다.

// babel.config.js
// 개발, 빌드환경에 따라 console.log를 제거해주는 플러그인 동작
module.exports = {
    plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
}

원인

원인을 찾기 위해 babel.config.js 에서 console.log로 process.env 값을 확인해보니 NODE_ENV 값이 없었다.

알고보니 Webpack은 기본적으로 process.env.NODE_ENV 값을 제공하지 않는다고한다.

해결

package.json 파일의 scripts 실행 정의에서 NODE_ENV 값을 전달하여 개발환경인지 배포환경인지 구분할 수 있게하였다.

// package.json
{
  "scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --mode development",
    "build": "NODE_ENV=production webpack"
  }
}

---

레퍼런스

https://gitabout.com/3
https://www.npmjs.com/package/babel-plugin-transform-remove-console
https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/manage-env-variables