この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも!大阪オフィスの西村祐二です。
アプリケーション開発でデバッグするときに一旦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の関数をオーバーライドして何もしない関数に変更することによって実現します。
src/main.ts
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で出力しておきます。
src/app/app.component.ts
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
することでも確認できます。
src/environment.ts
export const environment = {
production: true
};
さいごに
プロダクションビルドするときだけconsole.logの出力を無効化する方法を紹介しました。
実際、これが良い方法かどうかはわかりませんが、とてもお手軽だったのでブログにしてみました。他にもwebpackの設定変更をする方法もあるようでしたがwebpackをいじるのはやりたくないので省略しました。
誰かの参考になれば幸いです。
みなさんどのように開発しているか教えて下さい。
追記
下記のリンク先のようにChrome Dev Toolsを使うデバッグ方法が良さそうかなと思う今日このごろです。 https://qiita.com/ssuzuki0301/items/79573fda6251b5512973