在Require.js中使用多个版本的jQuery

我有一种情况,我必须在同一页面上运行两个版本的jQuery(基本上,有一个运行1.4.2的网站,我有一个运行需要1.8.2的脚本的书签我知道这不是一个好主意但我现在一直坚持下去。

现有版本为1.4.2合一,所需的较新版本为1.8.2。

我正在使用require.js,并在这里看到了这个问题的post但不太明白什么是最好的方法:

在我的情况下,我有一个模块main.js:

(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(); }); } })(); 

然后是一些看起来类似的模块:

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

我是新手requirejs并在使用版本1.4.2加载main.js之前加载它,如下所示:

  $.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上运行的代码。

谢谢

戴维

 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's 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版本1.x而jquery.modern是jquery版本2.x.

我用过console.log。 因此,请在启用浏览器控制台的情 以上答案基于Require.js的文档。 所以我认为它必须是你案件的解决方案。

这是我的推荐。 Require.js 。

我有一个几乎相同的问题,我设法使用类似的方法解决Ajeeb KP,但有一些关键的区别。 (Ajeeb的过程实际上并不适用于我,并且在使用jQuery CDN时始终失败)。

本质上,我创建了2个require.config实例,每个实例都在属性中定义了不同版本的jQuery(使用常见的require.config对象保持DRY,我将每个特定实例合并到其中)。 当调用require.config实例时(即“传递给require”,如RequireJS API所示),回调函数中的代码运行一个接收jQuery.noConflict(true)作为$参数的IIFE。 在IIFE中运行的任何代码 – 包括模块require’d – 运行最初传递给require的require.config实例中定义的jQuery版本。

这是代码:

 /* * For merging each separate require.config object with a "common RequireJS config * properties" object. Meant to avoid eg 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. }); 

第一个和第二个IIFE需要在底部的块是实现这项工作的必要条件。

在添加合并对象(函数mergeObjs)和我自己的文件中的默认对象的能力之前,我的需要配置对象(req1和req2)变得重复和混乱。

下面包含Bootstrap来certificate这个概念:我使用的特定Bootstrap模板需要较旧的版本才能在窗口对象上显示jQuery …而应用程序中的其余代码使用2.1.4。

上面的设置允许Bootstrap和我自己的代码运行没有问题,每个块一直使用适当的jQuery版本,但有一点需要注意:第二个块无法显式调用window。$(无论如何都是个坏主意)。

我为这个长度道歉 – 这是一个令人惊讶的棘手问题。