compilation_level='ADVANCED' and JQuery v1.11.0

[cathal coffey]

I am trying out GoogleClosureCompiler in my webpack config and it works with compilation_level='SIMPLE'

new ClosureCompilerPlugin({
  compiler: {
    language_in: 'ECMASCRIPT5',
    language_out: 'ECMASCRIPT5',
    compilation_level: 'SIMPLE'
  },
  concurrency: 3,
});

However when I use compilation_level='ADVANCED' I get the following error.

These are the settings I am using to cause the above error.

new ClosureCompilerPlugin({
   compiler: {
     language_in: 'ECMASCRIPT5',
     language_out: 'ECMASCRIPT5',
     compilation_level: 'ADVANCED',
     create_source_map: true,
     externs: 'node_modules/google-closure-compiler/contrib/externs/jquery-1.9.js'
  },
  concurrency: 3,
});

My project uses "jquery": "1.11.0".

I could not find this version in contrib/externs/ so I used the closest version.

Any help would be greatly appreciated.

Kind regards,
Cathal

[Chad Killingsworth]

Awesome. I hadn't tried this yet.

You are using the correct externs, but I don't think we have externs for jquery transit. You'll have to write your own for that - but it looks like maybe only a single function?

The error message you are showing in the console doesn't look like jQuery - more like a testing framework? Compiling that would take different externs as well. If it's Jasmine, there are externs in the contrib folder for that. Other frameworks you might have to write your own. I'm assuming it looks well formatted because you are using a source map.

Chad Killingsworth

[cathal coffey]

Awesome. I hadn't tried this yet.

Are you referring to the Webpack ClosureCompilerPlugin?

The error message you are showing in the console doesn't look like jQuery - more like a testing framework?

Actually the following screenshot suggests that it is infact JQuery, unless I am misunderstanding something?

 Compiling that would take different externs as well.

I am very confused about when and why I need externs, can you please explain or link me to some documentation? The only reason I tried to add an extern for JQuery was because I saw the above error and I thought adding the following would fix that.

externs: 'node_modules/google-closure-compiler/contrib/externs/jquery-1.9.js'

I'm assuming it looks well formatted because you are using a source map.

That is correct, when I set the following, I get uglified code.

 

create_source_map: false

Kind regards,

Cathal

[Chad Killingsworth]

Are you referring to the Webpack ClosureCompilerPlugin?

Using Closure Compiler with Webpack period actually.

 

Actually the following screenshot suggests that it is infact JQuery, unless I am misunderstanding something?

Your original screenshot had the following code:

jQuery.each(jQuery.expr.match.bool.source.match (

 That's not standard jQuery - that looks like assertion library added code.

I am very confused about when and why I need externs, can you please explain or link me to some documentation? The only reason I tried to add an extern for JQuery was because I saw the above error and I thought adding the following would fix that.

I just answered an almost identical question on StackOverflow this week: http://stackoverflow.com/a/35121355/1211524

Chad Killingsworth

[cathal coffey]

That's not standard jQuery - that looks like assertion library added code.

I have to disagree, please see line 8058 of the following: https://code.jquery.com/jquery-1.11.0.js

I just answered an almost identical question on StackOverflow this week: http://stackoverflow.com/a/35121355/1211524

Thanks for the link, very informative. I've actually been trying to define my own extern to fix this for the past hour but I'm getting nowhere.

I see that the following is defined in contrib/externs/jquery-1.9.js but I don't see any reference of jQuery.expr. I also don't understand how to define it because its not a function. Also whats weirder is that the error is complaining about jQuery.expr.match.bool being undefined.

/**
 * @param {Object} collection
 * @param {function((number|string),?)} callback
 * @return {Object}
 */
jQuery.each = function(collection, callback) {};

Can you please point me in the right direction?

Kind regards,

Cathal

[Chad Killingsworth]

Let me rephrase: that's not a part of the jQuery public API. The source of jQuery is not compatible with Closure-Compile. You can't include it as part of the compiler source - you have to reference it as an external library. You might think of this as you have to add jQuery to you page with a separate script tag (or you can concatenate the sources together after compilation to only have one).

But in either case, jQuery can't be included in the compilation when using ADVANCED_OPTIMIZATIONS. That's where the externs come in. They tell the compiler about the jQuery api so your code can be compiled.

Chad Killingsworth