Come rendere un plugin jQuery caricabile con requirejs

Question

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 utilizzando jQuery-cookie. Se ho capito bene che posso creare un file chiamato jquery-cookie.js e dentro fare

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 sono chiesto se ho potuto fare le cose come jQuery fa, che è come questo:

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 compatibile con requirejs o qualsiasi amd

Answer 1

Hai solo bisogno di effettuare una

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

.210

alla fine di jQuery-cookie.js, OR

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

da nessuna parte prima di includere jquery-cookie (come ogniqualvolta punti dati-principale, ad esempio).

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

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

Answer 2

Ci sono alcuni avvertimenti con l'uso della configurazione shim in RequireJS, indicato su http://requirejs.org/docs/api.html#config-shim. Vale a dire, "Non mescolare il caricamento CDN con shim config in una build" quando si utilizza l'ottimizzatore.

Stavo cercando un modo per utilizzare lo stesso codice del plugin jQuery sui siti sia con che senza RequireJS. Ho trovato questo snippet per i plugin jQuery a https://github.com/umdjs/umd/blob/master/jqueryPlugin.js. Si avvolge il plugin in questo codice e funzionerà correttamente in entrambi i modi.

(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 credito va a jrburke; come molto javascript, le sue funzioni all'interno di funzioni che agiscono su altre funzioni. Ma penso di aver disfatto ciò che sta facendo.

L'argomento della funzione factory nella prima riga è di per sé una funzione che viene richiamata per definire il plug-in sull'argomento $. Quando non è presente un caricatore compatibile con AMD, viene invocato direttamente per definire il plug-in sull'oggetto globale jQuery. Questo è proprio come il comune linguaggio definizione plugin:

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

Se c'è un caricatore modulo, quindi factory è registrato come il callback per il caricatore di invocare dopo aver caricato jQuery. La copia caricata di jQuery è l'argomento. E 'equivalente a

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

Answer 3

Proprio come un FYI a tutti alcuni dei plugin jQuery già utilizzano AMD/richiedono quindi non avete bisogno di dichiarare nulla in spessore. In effetti, ciò potrebbe causare problemi in alcuni casi.

Se si guarda nel jquery cookie JS vedrete definire chiamate e richiedere (["jquery"]).

e in jquery.js vedrete una chiamata per definire ("jquery", [], la funzione() ...