Question

I’ve got a problem since 3 days now with Google closure, because dependencies is made in the wrong order, i’ve got this :

main.js

(function () {
goog.provide('MYENGINE.Core');
goog.require('MYENGINE.engines.GraphicEngine');
goog.require('MYENGINE.engines.PhysicEngine');
goog.require('MYENGINE.engines.AudioEngine');
goog.require('MYENGINE.engines.GameEngine');

/*********************************
* @constructor
*
**********************************/
ENGINE.Core = function() 
{

};

})();

And this code (with the right names) :

(function () {
goog.provide('MYENGINE.engines.GraphicEngine');

/*********************************
* @constructor
*
**********************************/
MYENGINE.engines.GraphicEngine = function() 
{

};

})();

I don’t know why, but when i compilate this, “MYENGINE.engines.GraphicEngine” appears first before MYENGINE.Core.
So, when i run the page, i’ve got the error : *Uncaught ReferenceError: MYENGINE is not defined *

I use this code to compilate the project :

../extlib/closure/closure/bin/build/closurebuilder.py \
--root=../extlib/closure/ \
--root=../src \
--namespace="MYENGINE.Core" \
--output_mode=compiled \
--compiler_jar=compiler.jar \
> MYENGINE_min.js

In my “MYENGINE_min.js”, i can find the GraphicEngine’s creation before the core or initial namespace (MYENGINE), did i forgot to do something !?

Thanks a lot for your help !

Answer 1

Closure is designed such that you do not need to wrap each module in an anonymous function.
Your error should go away if you remove the anonymous function wrappers. For example, main.js becomes:

goog.provide('MYENGINE.Core');

goog.require('MYENGINE.engines.GraphicEngine');
goog.require('MYENGINE.engines.PhysicEngine');
goog.require('MYENGINE.engines.AudioEngine');
goog.require('MYENGINE.engines.GameEngine');

/**
 * @constructor
 */
MYENGINE.Core = function() 
{

};

You also asked:

I don’t know why, but when i compile this, “MYENGINE.engines.GraphicEngine” appears first before MYENGINE.Core.

In MYENGINE.Core the line:

goog.require('MYENGINE.engines.GraphicEngine');

indicates that MYENGINE.Core depends on MYENGINE.engines.GraphicEngine. Therefore, MYENGINE.engines.GraphicEngine must appear first so that it is defined when called from MYENGINE.Core. For example, Closure’s base.js is usually the first source in the listing produced by Closure Builder, since all of the other Closure Library sources depend on base.js to bootstrap the library.

If you would like to wrap the compiled JavaScript in an anonymous function for additional insurance against name collisions, the Closure Compiler provides the following flag:

--output_wrapper    Interpolate output into this string at the place denoted 
                    by the marker token %output%.

Using Closure Builder, the output wrapper would be specified on the command line as follows:

--compiler_flags="--output_wrapper=(function(){%output%})();"

In addition, setting the Compiler warning level to verbose will help catch additional errors at compile time:

--compiler_flags="--warning_level=VERBOSE"

The new build command would be:

../extlib/closure/closure/bin/build/closurebuilder.py \
--root=../extlib/closure/ \
--root=../src \
--namespace="MYENGINE.Core" \
--output_mode=compiled \
--compiler_jar=compiler.jar \
--compiler_flags="--output_wrapper=(function(){%output%})();" \
--compiler_flags="--warning_level=VERBOSE" \
> MYENGINE_min.js