Como fazer um plugin jQuery carregável com requirejs

Estou trabalhando com requirejs + jquery e queria saber se havia uma maneira inteligente de fazer um plugin jQuery funcionar bem com o require.

Por exemplo, estou usando o jQuery-cookie. Se bem entendi, posso criar um arquivo chamado jquery-cookie.js e dentro fazer

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

Eu me perguntei se eu poderia fazer coisas como o jQuery faz, que é assim:

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

ou se esta é a única maneira de tornar os plug-ins jQuery compatíveis com requirejs ou qualquer amd

Você só precisa fazer QUALQUER

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

no final de jquery-cookie.js, OR

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

em qualquer lugar antes de incluir jquery-cookie (como para onde quer que data-main aponte, por exemplo).

O último bloco de código que você postou é bom para coisas como jQuery, que são redistribuídas e podem ou não estar em um ambiente AMD. Idealmente, todo plugin jQuery já teria essa configuração.

Eu prefiro manter as bibliotecas incluídas o menos adulteradas possível, então a configuração global do shim uma vez por página parece a solução mais limpa para mim . Dessa forma, as atualizações são mais seguras e os CDNs se tornam uma possibilidade.

Existem algumas ressalvas ao usar a configuração de shim no RequireJS, apontadas em http://requirejs.org/docs/api.html#config-shim . A saber, "Não misture carregamento de CDN com configuração de correção em uma compilação" quando estiver usando o otimizador.

Eu estava procurando uma maneira de usar o mesmo código de plugin jQuery em sites com e sem RequireJS. Eu encontrei este snippet para plug-ins jQuery em https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Você envolve seu plugin neste código e ele funcionará corretamente de qualquer maneira.

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

}));

O crédito vai para jrburke; como muito javascript, são funções dentro de funções agindo em outras funções. Mas acho que descobri o que está fazendo.

O argumento da função factoryna primeira linha é ele próprio uma função que é chamada para definir o plugin no $argumento. Quando nenhum carregador compatível com AMD está presente, ele é chamado diretamente para definir o plug-in no jQueryobjeto global . É exatamente como o idioma de definição de plug-in comum:

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

Se houver um carregador de módulo, factoryserá registrado como retorno de chamada para o carregador invocar após carregar o jQuery. A cópia carregada do jQuery é o argumento. É equivalente a

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

Assim como um FYI para todos os plug-ins jquery já usam amd / require, você não precisa declarar nada no shim. Na verdade, isso pode causar problemas para você em alguns casos.

Se você olhar no JS do cookie jquery, verá define calls e require (["jquery"]).

e em jquery.js você verá uma chamada para definir ("jquery", [], function () ...