Removing console.log with closure compiler

Question

I'd like to make my JS code production ready by stripping out all console.log("blah blah") debugging statements. I'm confused by this popular SO answer (code below) on how to do this using Google's closure compiler, a popular JS minifier/compiler.

/** @const */
var LOG = false;
...
LOG && log('hello world !'); // compiler will remove this line
...

//this will even work with `SIMPLE_OPTIMALIZATIONS` and no `--define=` is necessary !

Two questions:

1. Multiples files: How does the above code work with multiple files (basic example below)? It has to be in a closure, right? Doesn't this then mean you have to put this code on each page? Also, doesn't it also then mean you have to change all the variables you want to be global from var foo='bar' to var window.foo='bar'; inside these closures on each page?

2. Minor issue: Shouldn't it be console.log('...') rather than log('...') because log() gives an error? Am I missing something obvious here?

<script src='/assets/js/file1.js'></script> <script src='/assets/js/file2.js'></script>

contents of file1.js:

var foo='bar';
console.log("foo"+foo);

contents of file2.js

var baz='bazzy';
console.log("baz"+baz);

Answer 1

If you have your code split up into multiple files, I would think you'd want to have a build process that joins them into one immediately invoked function. Then your var LOG = false; can just be included once at the top.

If by "each page", you mean that you have separate JavaScript files per page that aren't meant to be joined together, then yes, you'd need to have that code at the top of each, but then you're also not taking as much advantage of Closure Compiler.

Regarding globals, yes, you'd need to use window when setting, though I would hope you're defining only one global.

The use of log() implies that someone defined a log() function so that it's less verbose.

function log() {
    return console.log.apply(console, arguments);
}

Answer 2

I think you don't understand the answer from your link. Author suggests you to create a new variable

var LOG = false;

then you simply write LOG && __code__ ; ( coressponds to if(LOG) __code__ ; ) and the code after && will not be processed, because of partial evaluation of boolean expressions. It will be processed, after you set LOG to true. The variable is usually called a "switch" or "flag".

By the way, Closure Compiler may edit your code, but that code must behave the same after "compilation" as before it. That is the main principle of all these minifiers and optimizers (they must not convert your Quick Sort into GTA 5). So don't use Closure Compiler to make your code work differently (it is not possible, if it is - they have a bug in it!).

Answer 3

Taking the OP's example, if you don't want to modify file1.js you can compile it with an additional file (noconsole.js) containing:

console.log = console.debug = console.info = function(){};

Such as:

google-closure-compiler --js noconsole.js file1.js --js_output_file file1.out.js

As explained in my previous answer.