Évitez de charger des modules déjà injectés dans le DOM avec requirejs

Question

Y a-t-il un moyen d'éviter de charger des modules qui pourraient déjà exister dans le DOM ?

Exemple:

require.config({
  paths: {
    // jquery ici est nécessaire uniquement si window.jQuery est indéfini
    'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min'
  }
});

Ce serait génial de pouvoir utiliser quelque chose comme cet extrait de code

require.config({
  paths: {
    'jquery': {
       uri: '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
       // si cette fonction renvoie false ou undefined chargez le script à partir de l'url
       define: function(){ return window.jQuery; } 
    }
  }
});

-----------------------------------------------------------------

MISE À JOUR

-----------------------------------------------------------------

J'ai envoyé une demande de tirage à @jrburke sur github https://github.com/jrburke/requirejs/issues/886 avec ma proposition. La version corrigée de requirejs pourrait être testée ici:

http://gianlucaguarini.com/experiments/requirejs/requirejs-test3.html

Voici la configuration requirejs selon ma proposition d'API

require.config({
  paths: {
    // jquery ici est nécessaire uniquement si window.jQuery est indéfini
    'jquery':'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
    'lodash':'//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.0.0/lodash.underscore.min',
    'backbone':'//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min'
  },
  shim:{
    'jquery':{
      // avec ma correction maintenant je détecte si window.jQuery a déjà été défini
      // dans ce cas j'évite de charger le script depuis le cdn
      exports:'jQuery',
      // si cette fonction manque j'ai besoin de charger le nouveau jQuery depuis le cdn
      validate: function(){
        return  window.jQuery.Deffered;
      }
    },
    'lodash':{
      // lodash sera chargé uniquement s'il n'existe pas déjà dans le DOM
      exports:'_',
      // si cette fonction renvoie false ou undefined, chargez le script depuis le cdn
      validate: function() {
        // la version de lodash déjà disponible dans le DOM est-elle suffisamment récente pour mon application ?
        return  window.parseInt(window._.VERSION) >= 2;
      }
    },
    'backbone':{
      deps:['lodash','jquery'],
      // si backbone existe nous n'avons pas besoin de le charger deux fois
      exports:'Backbone'
    }
  }
});

Answer 1

Comme @jrburke le souligne dans votre pull-request, la façon de le faire est :

require.config({});

if (typeof jQuery === 'function') {
  define('jquery', function() { return jQuery; });
}

// commencer le chargement du module ici
require(['app'], function(app) {});

Si un module est déjà défini, il ne sera pas chargé à nouveau. Ici, la définition consiste simplement à réutiliser l'objet global jQuery déjà chargé.

Answer 2

Comme jQuery est compatible AMD, si elle est déjà présente sur la page, Require.js ne la chargera pas à nouveau.

D'une manière plus générale, Require.js ne consulte les configurations de chemin que lorsqu'un module n'a pas encore été défini. Donc, dès que vous avez un module défini, Require.js ne le chargera pas à nouveau :

define('jquery', [], function() { /* du code */ });
//        ^ Le module 'jquery' est défini ici. Require.js ne le chargera pas deux fois.

Consultez ce JsBin pour un exemple fonctionnel : http://jsbin.com/OfIBAxA/2/edit