Use requirejs and jquery, without clobbering global jquery?

Question

I'm using requirejs for the first time on a project. I'm working in an environment that has a lot of Javascript in place already, and I'm looking for clean ways to introduce my own code.

The problem I'm having is that I can't seem to find a module of jQuery that I can load that doesn't clobber existing jQuery.

I was surprised that even require-jquery.js introduces a global version of jQuery. Is there a way to load jQuery as a module without introducing any globals?

Answer 1

jQuery 1.7 supports AMD loading. But, the trick is avoiding a module naming conflict, since jQuery hardcodes its own module name as 'jquery'. If you are defining another module as 'jquery' (say, in the 'paths' property in your requirejs config), it will cause said conflict.

To load jQuery in your requirejs application scope, define a module, such as 'jquery-loader' and when you want to load jQuery, do it via 'jquery-loader':

define(['path/to/jquery.min'], function () {
    return jQuery.noConflict(true);
});

requirejs will 'cache' your reference to jQuery so that noConflict will only run the first time jquery-loader is loaded.

Answer 2

Multiple versions of jQuery on one page is bad. Stop hacking and upgrade jQuery or use the older version.

As for keeping $ safe try

(function($) {
    // requirejs inclusion block for loading


}(jQuery.noConflict(true));

If you pass true to .noConflict it will replace the old jQuery variable and not destroy that globally.

This means you can pass it in quietly. Say you have

<script src="jquery-1.2">
<script src="jquery-1.5">

Then using the above code would put the 1.2 $ & jQuery back in global space and give you the 1.5 jQuery as a local $ in your closure

Again I advise AGAINTS using multiple versions because its a right mess and a maintenance nightmare.

If your using 1.5 you can also use .sub to allow you to extend jQuery locally without corrupting the global jQuery