Modifying requirejs no-conflict jquery object

Question

Hoping this is a fairly easy answer. I'm trying to load an AMD version of Twitter's Bootstrap plugins into my require module that is using a no-conflict version of jquery (I need the no-conflict version because I have another jquery object in some legacy code).

However, I can't get the AMD plugins to add there methods to my no-conflict jquery object in the require module I'm defining. Any one have an idea what I'm doing wrong out there? Seems like it should be obvious.

The AMD bootstrap modules came from here: https://github.com/clexit/bootstrap-amd

Here's my code.

require.config({
    map: {

      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    },    
    paths : {
        jquery : '../bower_components/jquery/jquery',
        underscore : '../bower_components/underscore/underscore',
        backbone : '../bower_components/backbone-amd/backbone',
        marionette : '../bower_components/marionette/lib/core/amd/backbone.marionette',
                    'backbone.wreqr' : '../bower_components/backbone.wreqr/lib/amd/backbone.wreqr',
                    'backbone.babysitter' : '../bower_components/backbone.babysitter/lib/amd/backbone.babysitter',
                    'localstorage' : '../bower_components/backbone.localStorage/backbone.localStorage',
        handlebars : '../bower_components/handlebars/handlebars',
        text: '../bower_components/requirejs-text/text',
        hb: '../bower_components/requirejs-handlebars/hb',
        bootstrap: '../bower_components/bootstrap/amd'
    },
    shim : {
        underscore : {
            exports : '_'
        },
        handlebars: {
            exports: 'Handlebars'
        }
    }
});

require(['jquery', 'bootstrap'],function($){
    console.log($);
    $('#MainRegion').modal();
});

Answer 1

I have a repository on github that demonstrates how to do it.

In this demo, I load jQuery 1.8.3 like this:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

And then I have RequireJS load jQuery 1.10.2:

  require.config({
      baseUrl: "./js",
      paths: {
          jquery: 'jquery-1.10.2'
      },
      packages: [
          { name: "bootstrap", location: "../bootstrap/amd" }
      ],
      map: {
          '*': { 'jquery': 'jquery-private' },
          'jquery-private': { 'jquery': 'jquery' }
      },
  });

I notice in your configuration you did not use the packages option, which should cause RequireJS to fail loading bootstrap. The map rigmarole is what was explained in your other question and documented here.

And then I can test it with this code:

  console.log("Non-AMD version of jQuery", $.fn.jquery, $.fn.modal);
  require(["jquery", "bootstrap"], function ($) {
      console.log("AMD version of jQuery", $.fn.jquery, $.fn.modal);
      $(".modal").modal();
  });

The index.html file in the demo contains the scaffolding necessary for the modal to show up. The modal does show up, proving that Bootstrap installed itself on the version of jQuery which is loaded by RequireJS.