使用noConflict jQuery包含带有requireJS的jQuery UI

Question

I'm working on a JavaScript module that uses jQuery, some functions of jQuery UI (draggable) and jPlayer. Recently I made myself familiar with requireJS to manage the dependencies properly.

I don't want to produce conflicts with a possibly already existing jQuery version that the site that includes my script uses. For this reason I am mapping the jQuery dependencies to a module "jquery-private" with a call of noConflict(), as is described in the requireJS guide .

As jQuery UI takes up a lot of space, I would also like to just include the modules that I am actually using. ui.draggable has the dependencies ui.core, ui.mouse and ui.widget, so I should have to include these 4 modules.

My problem is that I would like the jQuery UI modules and the jPlayer module to use my own version of jQuery, but obviously it isn't accessible by the global $ variable after I called the noConflict() method. Unfortunately neither jQuery UI nor jPlayer are AMD modules, so I needed to make shim configurations for them.

Here is my definition of the dependencies:

require.config({
    baseUrl: 'javascript/modules',
    paths: {
        jquery: 'jquery-2.1.3',
        jPlayer: 'jquery.jplayer',
        uiCore: 'jquery.ui.core',
        uiMouse: 'jquery.ui.mouse',
        uiWidget: 'jquery.ui.widget',
        uiDraggable: 'jquery.ui.draggable'
    },
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    },
    shim: {
        jPlayer: {
            deps: ['jquery']
        },
        uiCore: {
            deps: ['jquery']
        },
        uiMouse: {
            deps: ['jquery','uiCore']
        },
        uiWidget: {
            deps: ['jquery','uiCore']
        },
        uiDraggable: {
            deps: ['jquery','uiCore','uiMouse','uiWidget']
        }
    }
});

require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
    (...)
}

Obviously this code produces errors as the $ variable in the jQuery UI modules is not defined.

Is there any way to pass my own jQuery object to modules? The top answer in another thread ( How use require.js to load jQuery with noConflict ) suggests that what I am trying to do is not possible, but maybe there is some other way to do it?

If there is none, I probably have to use global variables and heavily edit the included modules, which kind of makes it questionnable why to use a dependency management library like requireJS in the first place...

Answer 1

I found the following code on top of each module in jquery.ui:

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define([ "jquery" ], factory );
    } else {
        // Browser globals
        factory( jQuery );
    }
}(function( $ ) {...});

And it means jquery.ui checks when global AMD "define" function is defined and uses 'jquery' as AMD reference for module.

It will use no conflict of jquery based on requirejs recommendation in this and this .

And about how to use jQuery with AMD.