Using multiple versions of jQuery with Require.js

Question

I have a situation where I have to have two versions of jQuery running on the same page (in principle, I have a site running 1.4.2, and I have a bookmarklet that runs scripts that require 1.8.2. I know that this is not a good idea, but I am stuck with it at the moment).

The existing version 1.4.2 is in one, and the new version is 1.8.2.

I use require.js and saw a post in this question here , but don't quite understand what is the best way:

In my case, I have a main.js module:

(function () {
var root = this;

require.config({
    baseUrl: "http://localhost:9185/scripts/app/"      
});

define3rdPartyModules();
loadPluginsAndBoot();

function define3rdPartyModules() {
    define('jquery', [], function () { return root.jQuery.noConflict(true); });              
    define('ko', [], function () { return root.ko; });       
}

function loadPluginsAndBoot() {      
    requirejs([], boot);
}

function boot() {        
    require(['bootStrapper'], function (bs) { bs.run(); });
}
})();

and then some other modules that look something like this:

define('bootStrapper', ['jquery', 'presenter', 'repository', 'dataPrimer'],
function ($, presenter, repository, dataPrimer) {
    //some stuff here

I am new to requirejs and load it before main.js loads using version 1.4.2 as follows:

 $.getScript("http://localhost:9185/bundles/jsextlibs?v=GOyDBs-sBDxGR5AV4_K-m-   OK9DoE0LGrun5FMPyCO9M1", function () {     
    $.getScript("http://localhost:9185/Scripts/lib/require.js", function () {        
        $.getScript("http://localhost:9185/bundles/jsapplibs?v=9TJUN0_624zWYZKwRjap4691P170My5FUUmi8_fzagM1");
        $.getScript("http://localhost:9185/Scripts/main.js");
    });
});

-, , , , 1.8.2 , 1.4.2.

Answer 1

var reqOne = require.config({
context: "version1",
baseUrl: 'scripts/',
paths: {
    jquery: 'lib/jquery.min',
}
});

var reqTwo = require.config({
    context: "version2",
    baseUrl: 'scripts/',
    paths: {
        jquery: 'lib/jquery.modern',
    }
});

reqOne(["helper/util"], function(require,util) {
        //This function is called when scripts/helper/util.js is loaded.
            //If util.js calls define(), then this function is not fired until
                //util dependencies have loaded, and the util argument will hold
                    //the module value for "helper/util".
//                    intheutil(); //This was done
                    console.log('util loaded');
});


reqOne(['require','jquery'],function(require,$){
    console.log( $().jquery );
});

reqOne(['require','jquery'],function(require,jq){
    console.log( jq().jquery );
});


reqOne(['require','jquery'],function(require,$){
    console.log( $().jquery);
});

reqTwo(['require','jquery'],function(require,$){
    console.log( $().jquery );
});

console.log('If no errors mean success!');

, main.js. . github. github.com.

jquery.min - jquery version 1.x jquery.modern - jquery version 2.x

console.log. . Require.js. , .

. Require.js.

Answer 2

, , Ajeeb K.P, . ( Ajeeb , JQuery CDN).

, 2 require.config, jQuery, ( DRY, require.config, ). require.config(.. ", ", API RequireJS), IIFE, jQuery.noConflict(true) $. , IIFE, require'd, jQuery, require.config, .

:

/*
 * For merging each separate require.config object with a "common RequireJS config
 * properties" object. Meant to avoid e.g. baseUrl, common libs etc. between the 2 
 * (lodash cannot be used for this, as it not yet loaded until all this completes)
 */ 
var mergeObjs = function mergeObjs(objIn1, objIn2) {
    var conglomerateObj = {};
    Object.keys(objIn1).forEach(function(item) {
        conglomerateObj[item] = objIn1[item];
    });

    return (function mergeIn(o1, o2) {
        Object.keys(o2).forEach(function(key) {
            if (typeof o1[key] === 'undefined') {
                o1[key] = o2[key];
            } else if (typeof o1[key] === 'object' && typeof o2[key] === 'object') {
                o1[key] = mergeIn(o1[key], o2[key]);
            }
        });
        return o1;
    }(conglomerateObj, objIn2));
};


// 'Common' RequireJS config properties object. Both config objects use these values.
var reqCommon = {
    baseUrl: '../scripts',
    paths: {
        lodash: '../public/lodash/lodash',
        bootstrap: '../public/bootstrap/js/bootstrap.min'
    }
};

// RequireJS config properties object 1. Configures section run with it to use an
// older version of jQuery (1.11.3) loaded using a CDN, for use with Bootstrap.
var req1 = require.config(mergeObjs({
    context: 'version1',
    paths: { jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min' }
}, reqCommon));

// RequireJS config properties object 2. Configures section run with it to use a 
// newer version of jQuery. Used for almost everything except Bootstrap.
var req2 = require.config(mergeObjs({
    context: 'version2',
    paths: { jquery: '../public/jquery' } //new, local version of jQuery
}, reqCommon));


//
// 1st require'd block; runs with req1 RequireJS properties object used & thus 
// jQuery 1.11.3. Mainly for running Bootstrap.
//
req1(['lodash', 'jquery'], function(main, ta, _) {

    // This IIFE is intended to load the older jQuery version in regardless of the presence of jQuery v2.1.4
    (function($) {
        console.log('1st block 1st section jQuery version: ' + $.fn.jquery); 
          //--> shows 1.11.3 as version
        window.jQuery = this.jQuery = $; // needed - Bootstrap uses jQuery on the window object.

        //Load Bootstrap after jQuery 1.11.3 confirmed loaded
        req1(['bootstrap'], function(bootstrap) {
            console.log("1st block 2nd section: bootstrap loaded!");
            console.log("1st block 2nd section: jQuery version: " + $.fn.jquery); 
          //--> still shows 1.11.3, even though block 2 has usually run by now
        });

    }(jQuery.noConflict(true)));
});


//
// 2nd require'd block; runs with req2 RequireJS properties object used & thus 
// jQuery 2.1.4. For almost everything except Bootstrap.
//
req2(['main', 'testaddedjsfile', 'lodash', 'jquery'], function(main, ta, _) {
    //this IIFE keeps the newer jQuery version separated from the old version.
    (function($) {
        console.log('2nd block jQuery version: ' + $.fn.jquery);
          //--> shows 2.1.4 as version
    }(jQuery.noConflict(true)));
    // the bind helps ensure calls to $ don't inadvertently call window.$. which will be occupy.
});

IIFEs 1- 2- require .

(function mergeObjs) (req1 req2) .

Bootstrap : Bootstrap, , , jQuery window... 2.1.4.

Bootstrap , jQuery : . $( ).

- .