RequireJS + jQuery

This project shows how jQuery can be used with
RequireJS. It includes a sample project that you can use
as a template to get started.

See the Use with jQuery page on the
RequireJS site for more background on the sample project. The RequireJS site
also has a link to
download this sample project.

The sample project uses a require-jquery.js file which is just a simple
combination of RequireJS and jQuery.

This project will be kept relatively up to date with the latest jQuery and
RequireJS files as they are released.

Better integrations

With RequireJS, scripts can load in a different order than the order they are specified.
This can cause problems for jQuery plugins that assume jQuery is already loaded.
Using the combined RequireJS + jQuery file makes sure jQuery is in the page before
any jQuery plugins load.

However, the ideal use of jQuery with RequireJS is to load it as a module, since
it registers as an AMD module.

Here are some alternate ways to use RequireJS and jQuery together in a way that
recognizes jQuery plugin constraints.

Wrap all scripts with define()

Ideally, all the scripts you use would wrap themselves in a define() call so
that RequireJS can understand what dependencies need to be loaded before defining
the script’s functionality.

For scripts that just need jQuery, you can wrap the code in a wrapper like

    define(['jquery'], function ($) {
        //Script contents go here.

For more information on using define() to declare the codes as Asynchronous
Module Definition (AMD) modules, see the
RequireJS API page.

If you do not control the code in question, you can ask the code’s author if
they could optionally call define() in their code. As of jQuery 1.7, jQuery
itself optionally calls define() if it is available. The
umdjs project has some resources and examples
to help code authors update their code to this pattern.

Use shim config

In RequireJS 2.0, there is a
shim config option that
allows specifying the dependencies for a script without having to modify the
script. For simple jQuery plugins, it is enough to just specify an array that
mentions jQuery for the shim value:

    shim: {
        '': ['jquery'],
        'plugin.two': ['jquery']

Be sure to read
the build notes for shim.
In particular, if using “shim” config you must build in jquery.js into your
built file.

Use step plugin

Using the shim config is the recommended way to use non-module code with
RequireJS and jQuery. However, there are some situations in which the
step plugin may be useful. See the
step plugin README for more information.


View Github