我有一个几乎相同的问题,我设法使用与 Ajeeb KP 类似的方法解决了该问题,但有一些关键区别。(Ajeeb 的过程实际上对我不起作用,并且在使用 jQuery CDN 时始终失败)。
本质上,我创建了 2 个 require.config 实例,每个实例在属性中定义了不同版本的 jQuery(使用我将每个特定实例合并到的公共 require.config 对象保持 DRY)。当调用任一 require.config 实例时(即 RequireJS API 所说的“传递给 require”),回调函数中的代码运行一个接收 jQuery.noConflict(true) 作为 $ 参数的 IIFE。任何在 IIFE 中运行的代码——包括需要的模块——运行最初传递给 require 的 require.config 实例中定义的 jQuery 版本。
这是代码:
/*
* 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's 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.
});
底部第 1 和第 2 个必需块中的 IIFE 对完成这项工作至关重要。
在添加合并对象(函数mergeObjs)和我自己文件中的默认对象的功能之前,我的需求配置对象(req1 和req2)变得重复且混乱。
下面包含 Bootstrap 来证明这个概念:我使用的特定 Bootstrap 模板需要 jQuery 的旧版本才能出现在窗口对象上......而我在应用程序中的其余代码使用 2.1.4。
上述设置允许 Bootstrap 和我自己的代码毫无问题地运行,每个块始终使用适当版本的 jQuery,但有一个警告:第二个块无法显式调用 window.$(无论如何都是个坏主意)。
我为篇幅道歉 - 这是一个令人惊讶的棘手问题。