jQuery的闭包编译器命令行

Question

I found on the Internet severals forum about importation of jquery in compiled file

https://developers.google.com/closure/compiler/docs/api-tutorial3?csw=1

Using Google Closure compiler

Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?

They talk about Externs but when I compile my code I got an error :

$ is not defined

I tried this commands :

java -jar compiler.jar --js js/test.js js/test.js --js_output_file min-js/app.min.js --externs jquery-3.3.externs.js --compilation_level ADVANCED_OPTIMIZATIONS

java -jar compiler.jar --js js/test.js js/test.js --js_output_file min-js/app.min.js --externs https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js --compilation_level ADVANCED_OPTIMIZATIONS

test.js is a simple code that i want to compresss :

$( document ).ready( function() {

    var val = 0;

    //document.querySelector( ".button" ).addEventListener( "click", upButton );
    $( ".button" ).on( "click", upButton );

    function upButton() {

        val++;
        document.querySelector( ".show" ).innerText = val;

    }

} )

Test JakeParis

File test.js

jQuery( function($) {

    var val = 0;

    //document.querySelector( ".button" ).addEventListener( "click", upButton );
    $( ".button" ).on( "click", upButton );

    function upButton() {

        val++;
        document.querySelector( ".show" ).innerText = val;

    }

} )

Command

java -jar compiler.jar --js js/test.js --js_output_file min-js/app.min.js --compilation_level ADVANCED_OPTIMIZATIONS --externs js/jquery.js

Error error image

Answer 1

This is probably due to the $ variable not being available in the global scope. Oftentimes, the jQuery library is available globally as jQuery instead of $ . Perhaps, you should use this instead:

jQuery( document ).ready( function($) {

which can also be shortened to

jQuery( function($) {

Then everything inside that code block can use the $ as a reference to jQuery.