[小ネタ][Angular] プロダクションビルドするときだけconsole.logの出力を無効化させる

どうも！大阪オフィスの西村祐二です。

アプリケーション開発でデバッグするときに一旦console.logで出力して想定した値がきてるか、どんな値が入ってるかなど確認することはよくあるかと思います。

プロダクションビルド時にだけconsole.logでの出力を無効化する方法を紹介したいと思います。

試してみる

環境

Angular CLI: 8.3.23
Node: 12.13.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

セットアップ

Angular CLIを使って雛形アプリケーションを作成します。

$ ng new no-console --style=scss routing
$ cd no-console

実装

どうやって実現するかはconsole.logの関数をオーバーライドして何もしない関数に変更することによって実現します。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
  if (window) {
    window.console.log = () => {};
  }
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

適当にconsole.logで出力しておきます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'no-console';
  constructor() {
    console.log('###test###');
  }
}

動作確認

まず、通常のビルドをして、ログが出力されるか確認します。

$ ng serve

次に、プロダクションビルドして、出力されたファイルでhttp-serverでローカル実行してログが出力されないことを確認します。

$ ng build --prod
$ cd dist/no-console
$ http-server

やりましたね。想定どおり、ログ出力されていないことがわかります。

http-serverを使う以外にもproductionをtrueにしてng serveすることでも確認できます。

export const environment = {
  production: true
};

さいごに

プロダクションビルドするときだけconsole.logの出力を無効化する方法を紹介しました。

実際、これが良い方法かどうかはわかりませんが、とてもお手軽だったのでブログにしてみました。他にもwebpackの設定変更をする方法もあるようでしたがwebpackをいじるのはやりたくないので省略しました。

誰かの参考になれば幸いです。

みなさんどのように開発しているか教えて下さい。

---

追記

下記のリンク先のようにChrome Dev Toolsを使うデバッグ方法が良さそうかなと思う今日このごろです。 https://qiita.com/ssuzuki0301/items/79573fda6251b5512973

参考サイト

https://www.codementor.io/@brijmcq/angular-clear-all-of-your-console-logs-in-production-build-with-just-a-few-lines-of-code-cxcw30yqs

https://qiita.com/daikiojm/items/8fed93925f0f5d5fd24e