Question

I’m writing a script that’s meant to be embedded on 3rd party sites to add functionality to them. I recently ripped out my rather messy custom loader code and started replacing it with requirejs. One of the libraries that optionally gets loaded for me (depends on some parameters passed in) is jQuery.

This works well, until my script is included on a page that jQuery is already on, in which case, what appears to happen is some plugins partway load, requirejs loads jQuery over the page’s version, and the plugins promptly break.

Asking clients to rewrite their pages just to use this script is out of the question, so what I would like to do is detect if jQuery is already loaded, if it is, skip loading it through requirejs, and just use the already loaded one (This will possibly open me up to odd edge cases and bugs when they’re using a much older version of jQuery, but I don’t have much choice).

What I thought I would do is write a new module, that would first see if jQuery is loaded, if it is, just export the jQuery object, if it’s not, then load it, then do the export. However, I appear to be stymied, as the definition function for the module appears to need to be synchronous to work, so I can’t go off and load another script, which would be asynchronous, then stuff the export into requirejs.

Am I missing something in the docs? Is what I’m attempting impossible?

Answer 1

I had the same issue on a similar project, using require.js for a library intended to be loaded on 3rd-party sites. You can see my approach here, but here’s the simplified version:

// check for existing jQuery
var jQuery = window.jQuery,
    // check for old versions of jQuery
    oldjQuery = jQuery && !!jQuery.fn.jquery.match(/^1\.[0-4](\.|$)/),
    localJqueryPath = libPath + 'jquery/jquery-1.7.2.min',
    paths = {},
    noConflict;

// check for jQuery 
if (!jQuery || oldjQuery) {
    // load if it's not available or doesn't meet min standards
    paths.jquery = localJqueryPath;
    noConflict = !!oldjQuery;
} else {
    // register the current jQuery
    define('jquery', [], function() { return jQuery; });
}

// set up require
require.config({
    paths: paths 
});

// load stuff
require(['jquery', ... ], function($, ...) {

    // deal with jQuery versions if necessary
    if (noConflict) $.noConflict(true);

    // etc

});

As you can see, this looks for jQuery, and then either defines the “jquery” module as a wrapper for the existing library, or (if there’s no jQuery or if the existing jQuery is an old version) loads the library-specific jQuery with noConflict.

This works pretty well. The only downside is that you’re calling require() dynamically within your script, which makes it more difficult to use the r.js optimizer effectively.