RequireJS - Travailler avec 2 jQuery libs

Question

Dans un projet, je suis maintenant, je suis obligé de rester avec 2 appels lib jQuery dans une seule page (pour l'instant au moins):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> /* 1st jQuery call */ 
<script> 
    /* Section A - Some code that uses jQuery */ 
</script> 

<script data-main="main" src="require.min.js"> 
    /* 2nd jQuery call made inside */ 
</script> 

<script> 
    /* Section B - Some code that uses jQuery */ 
</script> 

Cela a causé quelques étrangetés dans la section B que j'ai vérifié la source du problème étant l'inclusion répétée de la librairie jQuery. Supposons que je contrôle uniquement la section AMD - quelle est la meilleure option/recommandée pour gérer cette situation? Merci!

Answer 1

jQuery est un module AMD. En plus, c'est un module AMD nommé, ce qui rend super difficile l'utilisation de 2 versions de jQuery sur la même page. (Voir ce http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html)

Cependant, dans votre cas, vous n'avez pas besoin de 2 versions différentes de jQuery. Vous avez juste besoin d'utiliser jQuery une fois en dehors d'AMD, puis à l'intérieur de l'arborescence de code AMD.

Votre solution est très simple: load require.js AVANT vous chargez jQuery. (Traduction: mettre la balise de script qui charge RequireJS avant la balise de script qui charge jQuery

<script src="require.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script> 
    /* Section A - Some code that uses gloabl jQuery */ 
</script> 
<script> 
    // start the AMD code tree 
    require(['main'],function(main){ 
     // run code that main module returns. 
     // Don't know what that may mean in your case. 
     // example: 
     main() 
    }) 
</script> 

Qu'arrive-t-il.

1. charges de requirejs et met en place les objets globaux require et define
2. charges jQuery et il (a) définit toujours global window.jQuery (+ window. $) et (b) si define existe et il est de la variété AMD, il se définit comme un module nommé avec un nom spécifique - "jquery" < - exactement cela
3. Votre code dépend de jQuery global s'exécute.
4. Votre code dépend de l'exécution de jQuery enregistrée par AMD.

3 et 4 utilisent une seule et même instance exacte de jQuery.

Vous devez absolument requérir jQuery en tant que "jquery" Aucune autre chaîne ne vous donnera une instance jQuery.

La seule façon que vous pouvez créer un alias jQuery est en créant un nom distinct qui définissent reconditionne déjà défini module « jquery »:

define(
    'my_jquery_yey' 
    , ['jquery'] 
    , function($){return $} 
) 

Answer 2

Si vous avez l'intention d'utiliser requireJs, charger les deux versions de jQuery avec requireJs, donc

• besoin de charger au moins un des blocs de code avec jQuery.noConflict(),
• utiliser la propriété de cale dans le besoin. objet de configuration.

Config (main.js):

require.config({ 
    paths: { 
     jqueryV1: "path/to/jqueryV1", 
     jqueryV2: "path/to/jqueryV2" 
    }, 
    shim: { 
     jqueryV1: { 
      exports: 'jQuery', 
      init: function() { 
      return this.jQuery.noConflict(); 
      } 
     }, 
     jqueryV2: { 
      exports: 'jQuery', 
      init: function() { 
      return this.jQuery.noConflict(); 
      } 
     } 
    } 
}); 

modules Définition devrait être facile maintenant.

Section A

define(['jqueryV1'], function($) { 
    // jQuery code section A 
}); 

Section B

define(['jqueryV2'], function($) { 
    // jQuery code section B 
});