Using RequireJS with jQuery

Back in lesson 12, we taught you what jQuery plugins are and how you can develop your own to extend jQuery’s powers. Being plugins for jQuery, they depend on, well, jQuery. And the code you write using your jQuery plugins’ methods depends on jQuery and these plugins. This is a perfect situation in which to employ RequireJS in your project.

Your plugins haven’t been developed to use AMD from the start. Therefore, it would seem that the only solution would be to go through every plugin and adapt them to use define(), declaring jQuery as a dependency. Fortunately, there’s a better approach, and that’s the subject of the next section.

jQuery plugins using AMD

If you’re developing a plugin from scratch and you want to use RequireJS, you can wrap the definition of the plugin with a call to define(), declaring jQuery as a dependency, as follows:

define(['jquery'], function($) {
   $.fn.jqia = function() {
      // Plugin code here...
   };
});

What this snippet reveals is that you don’t need to return the module because you’re augmenting the original jQuery object. Furthermore, you don’t need to wrap the definition of your plugin inside an IIFE because you already have a function that wraps it, and the jQuery object will be provided by RequireJS. As it is, the previous code doesn’t work because RequireJS isn’t able to resolve the “jquery” string specified as a dependency into the jQuery library. An easy way to solve this issue, recalling the conventions RequireJS employs, is to rename the jQuery file as jquery.js and place it in the same directory as the main entry. Once you’ve done that, you’ll be ready to use your plugin.

Let’s now assume that the plugin you wrapped was stored in a file called jquery.jqia.js. We’ll also assume the entry point of your project is stored in a file called main.js and that it depends on jQuery and your plugin. With this in mind, your main.js file should look like the following:

require(['jquery', 'jquery.jqia'], function($) {
   // Code that uses jQuery and the plugin
});

In this example there are two details to highlight. The first is that because the code relies on the plugin, the latter is defined as a dependency. The second is that you don’t need to add a second parameter to use the plugin, because once the plugin is loaded it augments the original jQuery object.

Adapting existent jQuery plugins

When starting a new project, planning to structure it in modules that employ AMD is easy. But often you have to maintain older libraries or use third-party software that wasn’t created with AMD in mind. For such situations, you can create a configuration file for RequireJS that allows you to avoid changing these files to use define():

requirejs.config({
   shim: {
      'jquery.jqia': ['jquery']
   }
});

This configuration employs the shim property and must be placed before the require() call. The shim property has an object as its value and enables you to specify dependencies for jQuery plugins that don’t call define(). The object literal assigned to shim must define the name of the modules as properties and their array of dependencies as values.

Based on this description, the final code of main.js is as follows:

requirejs.config({
   shim: {
      'jquery.jqia': ['jquery']
   }
});

require(['jquery', 'jquery.jqia'], function($) {
   // Code that uses jQuery and our plugin
});

With this last example you’ve seen how to adopt RequireJS in projects that take advantage of jQuery and jQuery plugins. The concepts described are far from being a complete guide to RequireJS, and there’s a lot more to discuss, like the optimizer and the many configuration properties provided. But this is a good start to employing this library to organize the dependency of your projects.

In the same way that you need a better way to manage the dependencies of a module and the order in which you should include them in your projects, you need a better and faster method to install, update, and even delete third-party software that your project uses. That’s exactly what we’ll discuss next.