Correct way of loading non-AMD compatible jQuery plugins in require.js with jQuery in noConflict mode?

Question

Say I want to use jquery together with a standard, non-amd enabled jquery plugin that has been defined using standard closure: (function($))( $.fn.myplugin = { ... } )(jQuery); and it all sits inside of a js/libs/jquery/jquery.myplugin.js.

I use this config:

require.config({
  baseUrl: 'js/',
  paths: {
    'jquery':          'libs/jquery/jquery-noconflict', 
    'underscore':      'libs/underscore/underscore',
    'backbone':        'libs/backbone/backbone',
    'jquery-myplugin': 'libs/jquery/jquery.myplugin'
  },
  shim: {
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
  },
  'jquery-myplugin': {
    deps:  ['jquery'] 
  }
});

I load jQuery in no-conflict mode in libs/jquery/jquery-noconflict.js, becase I don't want to pollute global namespace:

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

and this is how I load my main app.js:

define([
  'jquery',
  'underscore',
  'backbone',
  'jquery-myplugin'],
function($, _, Backbone, MyPlugin){
  //MyPlugin is always undefined, not even sure if 
  //I should be passing it here if it only extends jQuery?
});

Now, here is the problem I am experiencing - while I can use all libraries defined above without any problems, I could not work out the correct shim configuration to load non-AMD enabled jquery plugins.

I've tried setting up jquery-myplugin as deps of the jquery (and other way around) but I could never get it working.

It seems like I'm having problem with the following scenario:

1. jQuery loads in no-conflict mode.
2. plugin code runs, extending the instance of the jQuery above
3. I can use $ within my application, extended by the plugin code, so $.myplugin is available.

I have seen similar questions floating around but none of them actually resolves this issue giving only vague suggestions such as "use shim config"...

Edit

I also tried using

"jquery-myplugin": {
    deps: ["jquery"],
    exports: "jQuery.fn.myplugin"
}

And whilst plugin methods are available once loaded as AMD module this way, I still can't access: $('.class').myplugin() as default $ object hasn't been extended with myplugin code.

Answer 1

Using jQuery.noConflict(true) removes the jQuery global variable. When your plugin loads, it tries to access jQuery, but can't, causing this failure.

If your plugin was a module, it could get access to jQuery as a dependency. Or you could leave jQuery available as a global.