Google closure compiler ADVANCED mode breaks code

Question

I'm compiled this example javascript code with Google Closure Compiler

$(document).on('click', function () {
   console.log('Hello');
});

And, I got this output from that.

$(document).a("click",function(){console.log("Hello")});

Here on replaced with a. So, when I run this on browser I got error.

I'm used this command line for compiling script.

java -jar closure-compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js script.js

When I'm using --process_jquery_primitives argument I got this error.

java.lang.RuntimeException: com.google.javascript.jscomp.CompilerOptionsPreprocessor$InvalidOptionsException: The jQuery pass and the Closure pass cannot both be enabled.
        at com.google.javascript.jscomp.CompilerExecutor.runInCompilerThread(CompilerExecutor.java:126)
        at com.google.javascript.jscomp.Compiler.runInCompilerThread(Compiler.java:740)
        at com.google.javascript.jscomp.Compiler.compile(Compiler.java:710)
        at com.google.javascript.jscomp.Compiler.compile(Compiler.java:680)
        at com.google.javascript.jscomp.AbstractCommandLineRunner.doRun(AbstractCommandLineRunner.java:1080)
        at com.google.javascript.jscomp.AbstractCommandLineRunner.run(AbstractCommandLineRunner.java:492)
        at com.google.javascript.jscomp.CommandLineRunner.main(CommandLineRunner.java:1866)
Caused by: com.google.javascript.jscomp.CompilerOptionsPreprocessor$InvalidOptionsException: The jQuery pass and the Closure pass cannot both be enabled.
        at com.google.javascript.jscomp.CompilerOptionsPreprocessor.preprocess(CompilerOptionsPreprocessor.java:74)
        at com.google.javascript.jscomp.Compiler.compileInternal(Compiler.java:746)
        at com.google.javascript.jscomp.Compiler.access$000(Compiler.java:84)
        at com.google.javascript.jscomp.Compiler$2.call(Compiler.java:713)
        at com.google.javascript.jscomp.Compiler$2.call(Compiler.java:710)
        at com.google.javascript.jscomp.CompilerExecutor$2.call(CompilerExecutor.java:91)
        at java.util.concurrent.FutureTask.run(Unknown Source)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
        at java.lang.Thread.run(Unknown Source)

Note: I'm using latest closure compiler

Answer 1

The reason the output changed is because with the compilation level set to ADVANCED_OPTIMIZATIONS, the Closure Compiler will rename all functions and variables to the simplest form.

There are function and variable names it is configured to avoid renaming like console.log and property names like height, width etc. By default it doesn't understand that jQuery functions shouldn't be renamed, so when it comes across them they will be changed.

There two ways of getting around this:

1. Create a jQuery externs file and pass it to the compiler. An externs file is a file containing function and variable definitions that help the compiler to recognize that it should not rename anything matching the definition provided.
2. Use square bracket notation instead of dot notation to access jQuery functions and variables. Using this method, the square bracket will be converted into a dot notation, but without renaming the variable.

Using your code

$(document)['on']('click', function () {
   console.log('Hello');
});

will be compiled to

$(document).on("click",function(){console.log("Hello")});

To extend this example, when you have an object with properties you don't want to be changed, use quotes around them when you declare the object eg

Instead of

var foo = {bar:'bar'};

Use

var foo = {'bar':'bar'};

Hope this will help :)