web-dev-qa-db-fra.com

Comment faire un plugin jQuery chargeable avec requirejs

Je travaille avec requirejs + jquery et je me demandais s'il existait un moyen intelligent de faire en sorte qu'un plugin jQuery fonctionne correctement 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

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 demandais si je pouvais faire des choses comme jQuery, 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 processeur AMD

javascriptjqueryrequirejs
86
Nicola Peluchetti

Il 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 par exemple là où data-main pointe sur, par exemple).

Le dernier bloc de code que vous avez publié est utile pour des choses telles que jQuery qui sont redistribuées et peuvent ne pas être dans un environnement AMD. Idéalement, tous les plugins jQuery auraient déjà cette configuration.

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

66
Hans

L'utilisation de la configuration de shim dans RequireJS présente certains inconvénients, signalés à l'adresse http://requirejs.org/docs/api.html#config-shim . À savoir, "Ne mélangez pas le chargement de CDN avec la configuration de shim dans une version" lorsque vous utilisez l'optimiseur.

Je cherchais un moyen d'utiliser le même code de plug-in jQuery sur des sites avec et sans RequireJS. J'ai trouvé cet extrait de code pour les plug-ins jQuery à l'adresse https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Vous insérez 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.yourjQueryPlugin = function () {
        // Put your plugin code here
    };  

}));

Le crédit va à jrburke; comme tant de javascript, il fonctionne à l'intérieur de fonctions agissant sur d'autres fonctions. Mais je pense avoir déballé ce que ça fait.

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

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

S'il existe un chargeur de module, alors factory est enregistré comme rappel à invoquer par le chargeur après le chargement de jQuery. La copie chargée de jQuery est l'argument. C'est équivalent à

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

Tout comme un FYI pour tous les plugins jquery utilisent déjà AMD/require, vous n'avez donc pas besoin de déclarer quoi que ce soit dans le shim. En fait, cela pourrait vous causer des problèmes dans certains cas.

Si vous regardez dans le cookie JQuery JS, vous verrez définir les appels et exiger (["JQuery"]).

et dans jquery.js, vous verrez un appel à définir ("jquery", [], function () ...

2
TPEACHES