Saturday, October 16, 2010

RequireJS 0.14.4 Released, jQuery 1.4.3 support

RequireJS 0.14.4 is available for download. This release supports jQuery 1.4.3. What does this mean?
  • The bundled RequireJS+jQuery file on the download page has jQuery 1.4.3 in it.
  • Due to a change in jQuery, there are almost no patches to jQuery in the RequireJS+jQuery file, just a convenience patch to register it as a module.
  • If your scripts properly use define() with RequireJS, then it is possible to load jQuery from the Google CDN. This can save you some bandwidth costs!
There are a few caveats with using RequireJS to load jQuery from the CDN:
  • Most jQuery plugins assume jQuery is already loaded when they execute. However, with RequireJS, jQuery could still be loading when the plugin file executes. If you plan to use jQuery plugins in your project and you really want to load jQuery from the CDN, then in your own RequireJS-based project, you should wrap each of the plugins in a define(function(){ /*plugin goes here */ }); wrapper. Or, just stick with using the combined RequireJS+jQuery file served from your server.
  • If you use code with define() calls in them, be sure to do the minification and combining of scripts using the RequireJS optimization tool. It will make sure the define() calls get proper scripts names to allow all the scripts to be combined together. If you use another tool to just concatenate your define()'d scripts together, it will result in errors if the define()'d modules are not named. A copy of the optimization tool is included in the jQuery+RequireJS Sample Project.
  • This is only recommended if you have one version of jQuery loaded in the page.
An example showing how to configure RequireJS to load jQuery from the CDN:

"paths": {
"jquery": ""

//Now require jQuery when you want it, using 'jquery'
//as the dependency name.
//HOWEVER, note the important caveats above!

require(['jquery'], function ($) {
Now if only I could get RequireJS releases on a CDN, that would be even sweeter!


Philippe said...

What is the caveat?

James Burke said...

Philippe: If you are referring to the "caveats" comment in the code sample, it is referring to the list of caveats in the blog post above the code sample. I probably could have made the code comment clearer that it was referencing items in the blog post.