Come rendere un plugin jQuery caricabile con requirejs

Sto lavorando con requirejs + jquery e mi chiedevo se ci fosse un modo intelligente per far funzionare bene un plugin jQuery con require.

Ad esempio sto usando jQuery-cookie. Se ho capito bene posso creare un file chiamato jquery-cookie.js e all'interno do

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"]
    }
} );

mi chiedevo se potevo fare cose come fa jQuery, che è così:

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

o se questo è l'unico modo per rendere i plugin jQuery compatibili con requirejs o qualsiasi amd

Hai solo bisogno di fare ENTRAMBI

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

alla fine di jquery-cookie.js, OR

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

ovunque prima di includere jquery-cookie (come dove punta data-main, ad esempio).

L'ultimo blocco di codice che hai pubblicato è utile per cose come jQuery che vengono ridistribuite e possono essere o meno in un ambiente AMD. Idealmente ogni plug-in jQuery dovrebbe già averlo configurato.

Preferisco mantenere le librerie incluse il più genuini possibile, quindi la configurazione shim globale una volta per pagina mi sembra la soluzione più pulita . In questo modo gli aggiornamenti sono più sicuri e le CDN diventano una possibilità.

Ci sono alcuni avvertimenti sull'utilizzo della configurazione shim in RequireJS, indicati su http://requirejs.org/docs/api.html#config-shim . Vale a dire, "Non mischiare il caricamento CDN con la configurazione shim in una build" quando utilizzi l'ottimizzatore.

Stavo cercando un modo per utilizzare lo stesso codice plugin jQuery su siti con e senza RequireJS. Ho trovato questo snippet per i plugin jQuery su https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Inserisci il tuo plugin in questo codice e funzionerà correttamente in entrambi i casi.

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

}));

Il merito va a jrburke; come molto javascript, le sue funzioni all'interno di funzioni che agiscono su altre funzioni. Ma penso di aver disimballato cosa sta facendo.

L'argomento della funzione factorynella prima riga è esso stesso una funzione che viene invocata per definire il plugin $sull'argomento. Quando non è presente alcun caricatore compatibile con AMD, viene richiamato direttamente per definire il plug-in jQuerysull'oggetto globale . È proprio come l'idioma comune della definizione di plugin:

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

Se è presente un caricatore di moduli, factoryviene registrato come callback per il caricatore da richiamare dopo aver caricato jQuery. La copia caricata di jQuery è l'argomento. È equivalente a

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

Proprio come per tua informazione, tutti alcuni plugin jquery usano già amd / require, quindi non è necessario dichiarare nulla nello shim. In effetti, ciò potrebbe causare problemi in alcuni casi.

Se guardi nel cookie jquery JS vedrai define calls e require (["jquery"]).

e in jquery.js vedrai una chiamata a define ("jquery", [], function () ...