Menu
We are trying to switch the packaging for our project from dojo to google closure, but we haven't had any luck so far. Here is a simple example that illustrates what we are trying to accomplish:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="runtime/src/core/lib/goog-rev26/base.js"></script>
<script>
goog.require("foo.bar");
function main() {foo.bar.echo("hello world")}
</script>
</head>
<body onload="main()">
</body>
</html>
Then in /foo/bar.js I have:
goog.provide("foo.bar");
foo.bar.echo = function(s) {console.debug(s);}
The errors I receive in firebug are as follows:
goog.require could not find: foo.bar foo is not defined
When I look in the Net tab, there isn't an http request out to fetch a file - I was expecting the closure library to generate a script tag to fetch bar.js.
help! ;)
464
The Google Closure library is a powerful JavaScript framework and includes features which are also interesting outside of a browser environment, e.g. implementations of common algorithms (encryption, geometry, time and date handling, ...), data structures (tries, pools, priority queues, ...) and support for functional ...
goog. module is a module system for JavaScript tied to Closure Compiler and Closure Library. It was originally introduced to replace the traditional goog. provide and goog. require structure while behaving similarly to ES modules.
I figured it out and it's not very hard, but there are a few gotchas.
Basically, you can use the dependency generating script calcdeps.py (you should read calcdeps.py docs) in one of several modes:
For development you should use (1), since it allows you to not run the calcdeps.py after editing the JS sources, unless you make changes to the dependency tree. The rest of the answer is about this way, I haven't tried the other one yet.
Here's what I did to generate it:
#!/bin/bash
cd closure-library/closure/goog
python ../bin/calcdeps.py -p ../../../js -o deps > ../../../my-deps.js
...assuming the following directory structure:
project/
closure-library/ (as checked out from SVN)
js/ (my JS code)
app.html
(the -p parameter traverses all js files in the specified directory and the docs say you can specify multiple directories to search if you have to.)
The above call creates a my-deps.js file next to the main app.html, which I use to run the application. The created file contains information about my JS files in js/ and looks like this:
goog.addDependency('../../../js/controllers.js', ['proj.controllers'], []);
goog.addDependency('../../../js/ui.js', ['proj.ui'], ['proj.controllers']);
- where the first string it the path to my JS file relative to closure-library/closure/goog/base.js (this is important!), the second array is the list of goog.provide-d strings, and the last array is the list of goog.require-d strings.
Now in app.html I have:
<script src="closure-library/closure/goog/base.js"></script>
<script src="my-deps.js"></script>
<script>
goog.require("proj.ui");
</script>
<script>
// here we can use the required objects
</script>
Note:
goog.require call has to be in a separate script tag, because it appends a script tag to load the required scripts and they are loaded after the current script tag finished processing.Gotchas:
goog.require creates the script URL to load by concatenating the base.js base URL (i.e. without base.js leafname) and the first parameter to goog.addDependency in deps.js.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
