javascript - WIKI: How to use Lime (how to use closure-compiler with 3rd party (closure) libraries)

Question

The following post inspired me to have a look at limeJS, as a side project I'm working on and off an a Yatzee game (mostly off) and thought that might be a nice library to use.

As a beginner in google-closure I had some difficulties running uncompiled code and getting code compiled, mostly due to not knowing what the options and commands are and because of dependencies.

For other beginners with google-closuse I have written this tutorial.

Note that jQuery can be used by your closure compiled code but you need the jQuery externs file. You can't compile jQuery into your code, closure library has a dressed down dojo that can be found in third_party. When using that you can compile your code to one file.

What you need:

1. Python
2. Git client
3. Closure compiler for compiling code (minifying and merging all files into one)
4. Closure library like jQuery and jQuery ui but can be compiled along with your code
5. Python (I use 2.7)
6. LimeJS As a 3rd party library (use git client to get it, the url:https://github.com/digitalfruit/limejs.git)
7. JAVA JRE

Directory structure

I'm using Windows and have my projects in D:projects, if you have your projects somewhere else you have to replace D:projects references to your own.

In D:projects I make a directory called libraries in that directory I copy the goog and third_party directories from closure library (goog is under the closure directory) since you'll use them for many projects I keep it at projects root, you can include a copy of it in every project you create but in this case I'll share the library among all projects.

Now I copy the contents of the src directory from limeJS ([lime clone dir]limesrc) to D:projectslibrarieslime (the one containing the sub directories called animation, audio ...).

Next I'll use an existing project from the limeJS library, copy the [lime clone dir]limedemos oundball to D:projects oundball

At this time your directory structure should look like this:

• D:
  • projects
    • libraries
      • goog
      • lime
        • animation
        • audio
        • css
        • ...
      • third_party
        • closure
          • ...
    • roundball
      • assets
      • ... other roundball stuff

cacldeps.py

When you open D:projects oundball b.html and check out the console (press F12 in Chrome or in FireFox preferably having firebug plugin installed) you'll see an error: "ReferenceError: goog is not defined"

Open up D:projects oundball b.html and change:

<script type="text/javascript" src="../../../closure/closure/goog/base.js"></script>

to

<script type="text/javascript" src="../libraries/goog/base.js"></script>

Now when you open up rb.html again you get a different error: "goog.require could not find: lime.Director"

This is because closure uses deps.js to find dependencies and since lime is not in there it can't find it. Lucky for us there is a tool called calcdeps.py in the bin directory of the closure library that can create this file for us. It'll look in your code and and use goog.require to figure out what other files are needed. If your file structure is good than this tool will find it.

It will expect that Director is in a file called director.js in a directory called lime (and it is). That js file should have a goog.provide statement providing lime.Director.

You can add directories for calcdeps.py to look in with the --path parameter.

In D:projects oundball I'll create a makedeps.bat with the following content:

set calc="D:softwareclosure compilerlibraryclosureincalcdeps.py"
c:Python27python.exe %calc% ^
--path D:projects
oundball ^
--path D:projectslibraries ^
--input D:projects
oundball
b.js ^
--output_mode deps ^
--output_file D:projectslibrariesgoogdeps.js
pause

Uncompiled code uses /goog/deps.js to load dependencies. caclcdeps.py will check your code starting with rb.js (as this is the starting point of the code) and add entries to deps.js according to what your project uses.

Once again, cacldeps.py can be found in the bin directory of closure library.

Note that when you have another project; let's say D:projectsproject2 then you have to create a makedeps.bat in that project directory that re creates the deps.js for you before you can run the uncompiled code. This because multiple projects share one google closure library so when you switch projects make sure you'll build the deps.js first before running your uncompiled code.

Resolving missing dependency

Opening the rt.html we still get an error but a different one: Error: "Undefined nameToPath for lime.css"

Looking in goog/deps.js we can find that lime.css is needed by lime but doesn't have an entry in deps.js. Why is this? Looking in D:projectslibrarieslime there is no css directory or css.js file. But in the directory where you cloned the git lime project there is a directory called css.

Copy the css directory to D:projectslibrarieslime and run makedeps.bat again, now when you open rt.html it will run.

The whole thing is uncompiled and you can set breakpoints to step into 3rd party code.

Compile your code

In production you would want to compile the code to one file. To compile the code I created a compile.bat in D:projects oundball with the following content:

set calc="D:softwareclosure compilerlibraryclosureincalcdeps.py"
c:Python27python.exe %calc% ^
--path D:projects
oundball ^
--path D:projectslibraries ^
--input D:projects
oundball
b.js ^
--compiler_jar "D:softwareclosure compilercompiler.jar" ^
--output_mode compiled ^
--compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" ^
--compiler_flags="--formatting=PRETTY_PRINT" ^
--output_file D:projects
oundballcompiled
oundball.js
pause

;Need this flag for production compile:
;--compiler_flags="--define goog.DEBUG=false" ^
;Remove the following flag from production compile:
;--compiler_flags="--formatting=PRETTY_PRINT" ^
;lime libraries is giving me errors with stricter compilation
;  so had to remove this flag (have to fix the errors or no type checking for your code)
;--compiler_flags="--warning_level=VERBOSE" ^

The file compiler.jar can be found where you downloaded (and extracted) closure compiler

Now when you run the compile.bat and open D:projects oundballcompiled oundball.html you'll see in the developer tools of your browser that only roundball.js is loaded.

Answer 1

The answer is in the question because it's a howto article that could help someone (like me in the future when I forgot how to do it).