babel-plugin-transform-remove-console 사용기

우리가 개발을 하면 빼먹을 수 없는 것이 있다. 

그것은 바로 Console.log 지우기! 

 

이게 또 은근 귀찮은 작업인데, 자동으로 지워주는 플러그인이 있어서 소개를 한다! 

 

설치 

npm install --save-dev babel-plugin-transform-remove-console

어썸한 패키지를 먼저 설치해준다. 

 

적용하기

const babelArgv = require("yargs").argv;

const isProd = babelArgv.env === "prod";

const config = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: "> 0.25%, not dead",
        useBuiltIns: "usage",
        corejs: 3,
        shippedProposals: true,
        modules: false,
      },
    ],
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
    "@babel/preset-typescript",
  ],

  plugins: ["@babel/plugin-syntax-dynamic-import"],
};

if (isProd)
  config.plugins.push([
    "transform-remove-console",
    { exclude: ["error", "warn"] },
  ]);

module.exports = config;

개발 단계에서는 콘솔이 보여야하고, 배포할 경우에만 콘솔이 사라져야 한다고 생각한다. 

그리고 error, warn 같은 경우 필요에 따라 있어야 할 수 있다. 

 

그래서 package.json에서 --env 옵션으로 배포 모드와 개발 모드를 나눠주었다. 

그리고 그것을 yargs 패키지를 사용해서 받아와 isProd 변수에 조건을 넣어주었다. 

 

마지막으로 if문으로 배포 모드의 경우 plugins에 transform-remove-console을 적용했다. 

exclude는 지우지 않을 콘솔을 나타낸다.