Comment rendre un plugin jQuery chargeable avec requirejs

Question

Je travaille avec requirejs+jquery et je me demandais s'il existait un moyen intelligent de faire fonctionner un plugin jQuery avec require.

Par exemple, j'utilise jQuery-cookie. Si j'ai bien compris, je peux créer un fichier appelé jquery-cookie.js et à l'intérieur faire

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

Je me suis demandé si je pouvais faire les choses comme jQuery, c'est-à-dire comme ceci :

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

ou si c'est le seul moyen de rendre les plugins jQuery compatibles avec requirejs ou tout autre amd

Answer 1

L'utilisation de la configuration de shim dans RequireJS présente quelques inconvénients, signalés sur le site Web de la Commission européenne. http://requirejs.org/docs/api.html#config-shim . A savoir, "Ne pas mélanger le chargement CDN avec la configuration shim dans une construction" lorsque vous utilisez l'optimiseur.

Je cherchais un moyen d'utiliser le même code de plugin jQuery sur des sites avec et sans RequireJS. J'ai trouvé cet extrait pour les plugins jQuery à l'adresse suivante https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Vous intégrez votre plugin dans ce code, et il fonctionnera correctement dans les deux cas.

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    define(['jquery'], factory);
} else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
}
}(function ($) {

    $.fn.jqueryPlugin = function () {
        // Put your plugin code here
    };  

}));

Le mérite revient à jrburke ; comme beaucoup de javascript, ce sont des fonctions à l'intérieur de fonctions agissant sur d'autres fonctions. Mais je pense avoir compris ce qu'il fait.

L'argument de la fonction factory dans la première ligne est elle-même une fonction qui est invoquée pour définir le plugin sur le fichier $ argument. Si aucun chargeur compatible AMD n'est présent, il est invoqué directement pour définir le plugin sur le fichier global jQuery objet. C'est exactement comme l'idiome de définition de plugin commun :

function($)
{
  $.fn.jqueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

S'il existe un chargeur de module, alors factory est enregistré en tant que fonction de rappel que le chargeur doit invoquer après le chargement de jQuery. La copie chargée de jQuery est l'argument. C'est l'équivalent de

define(['jquery'], function($) {
  $.fn.jqueryPlugin = function() {
     // Plugin code here
  };
})

Answer 2

Il vous suffit de faire SOIT

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});

à la fin de jquery-cookie.js, OU

requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

n'importe où avant d'inclure jquery-cookie (comme partout où data-main pointe, par exemple).

Le dernier bloc de code que vous avez posté est bon pour des choses comme jQuery qui sont redistribuées et peuvent ou non être dans un environnement AMD. L'idéal serait que chaque plugin jQuery soit déjà configuré.

Je préfère garder les bibliothèques incluses aussi intactes que possible, donc la configuration globale de shim une fois par page me semble la solution la plus propre. . De cette façon, les mises à jour sont plus sûres et les CDN deviennent une possibilité.