💊

ビルド時に環境によってはconsole.logを排除したい

2024/06/22に公開

Next.js

前提

Viteを利用しておりますのでvite.config.tsを例に備忘として実装例を記載しております。
(SvelteKit利用してます、皆さんも是非)

背景

console.log, console.debug等ログを仕込んでおきたいけど本番ではな見せたくないケースはよくあるかと思います。console.debugにして一見表示されないように見えてもVerboseにすると表示されたりしてしまうためしっかりビルド時に排除しておきたいと思って色々対応してみました

やりがちケース

良くあるケースとしては以下のようなHelper/Util関数を利用してログを吐かせる方法ですね。
実装はかなり適当ですが、環境変数より環境を判断して処理を振り分けるケースです。
普通にログを吐くのに関数のimport等をして少し冗長になってしまい美しさに欠けるのであまり好きではない。

sample.ts

export const logger = (message: string) => {
  if(本番環境) {
    return;
  } else {
    console.log(message);
  }
}

terserで排除する方法

以下は本番環境のみterser minifyを利用して排除する設定を入れています。
(pure_funcだと他のコードでも転用可能)
またpure_funcを利用して該当関数を排除していますが、drop_consoleを利用して全て排除する方法もあります。

terserの設定は以下を参照

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig((config) => {
  if (config.mode === 'production') {
    return {
      plugins: [sveltekit()],
        test: {
          include: ['src/**/*.{test,spec}.{js,ts}']
        },
        build: {
          minify: 'terser',
          terserOptions: {
            compress: {
              pure_funcs: ['console.log', 'console.debug']
            }
          }
        }
    };
	} else {
      return {
        plugins: [sveltekit()],
        test: {
          include: ['src/**/*.{test,spec}.{js,ts}']
        }
      };
	}
});

最後に

難しいものではないですが、とりあえずHelper/Utilにぶち込めば良いみたいに思いがちなところなので避けがちなビルドオプション周りはもう少し把握しておきたいと少し思えました。。。

前提

背景

やりがちケース

terserで排除する方法

最後に

Discussion