Cómo hacer que un complemento de jQuery se pueda cargar con requirejs

Estoy trabajando con requirejs + jquery y me preguntaba si había una forma inteligente de hacer que un complemento de jQuery funcionara bien con require.

Por ejemplo, estoy usando jQuery-cookie. Si entendí correctamente, puedo crear un archivo llamado jquery-cookie.js y dentro

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

Me preguntaba si podría hacer cosas como jQuery, que es así:

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

o si esta es la única forma de hacer que los complementos de jQuery sean compatibles con requirejs o cualquier amd

Solo necesitas hacer CUALQUIER

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

al final de jquery-cookie.js, O

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

en cualquier lugar antes de incluir jquery-cookie (como donde apuntan los datos principales, por ejemplo).

El último bloque de código que ha publicado es bueno para cosas como jQuery que se redistribuyen y pueden o no estar en un entorno AMD. Idealmente, todos los complementos de jQuery ya lo tendrían configurado.

Prefiero mantener las bibliotecas incluidas lo más sin adulterar posible, por lo que la configuración de corrección global una vez por página me parece la solución más limpia . De esa manera, las actualizaciones son más seguras y las CDN se convierten en una posibilidad.

Hay algunas advertencias sobre el uso de la configuración de corrección en RequireJS, señaladas en http://requirejs.org/docs/api.html#config-shim . Es decir, "No mezcle la carga de CDN con la configuración de shim en una compilación" cuando esté usando el optimizador.

Estaba buscando una forma de usar el mismo código de complemento de jQuery en sitios con y sin RequireJS. Encontré este fragmento para los complementos de jQuery en https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Envuelve tu complemento en este código y funcionará correctamente de cualquier manera.

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

}));

El crédito va a jrburke; como mucho javascript, sus funciones están dentro de funciones que actúan sobre otras funciones. Pero creo que he descompuesto lo que está haciendo.

El argumento factoryde la función en la primera línea es en sí mismo una función que se invoca para definir el complemento en el $argumento. Cuando no hay un cargador compatible con AMD, se invoca directamente para definir el complemento en el jQueryobjeto global . Es como el modismo común de definición de complementos:

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

Si hay un cargador de módulo, factoryse registra como devolución de llamada para que el cargador lo invoque después de cargar jQuery. La copia cargada de jQuery es el argumento. Es equivalente a

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

Al igual que para su información, algunos de los complementos de jquery ya usan amd / require, por lo que no necesita declarar nada en el shim. De hecho, hacerlo puede causarle problemas en algunos casos.

Si miras en la cookie jquery JS, verás definir llamadas y requerir (["jquery"]).

y en jquery.js verá una llamada para definir ("jquery", [], function () ...