Как сделать плагин jQuery загружаемым с помощью requirejs

Я работаю с requirejs + jquery, и мне было интересно, если бы был разумный способ заставить плагин jQuery работать с требованиями.

Например, я использую jQuery-cookie. Если я правильно понял, я могу создать файл с именем jquery-cookie.js и внутри 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"]
    }
} );

Я задавался вопросом, могу ли я делать такие вещи, как jQuery, вот так:

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

или если это единственный способ сделать плагины jQuery совместимыми с requirejs или любым amd

Ответ 1

Вам нужно всего лишь сделать

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

в конце jquery-cookie.js, OR

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

где-нибудь, прежде чем вы включите jquery-cookie (например, где бы ни находились основные данные, например,).

Последний блок кода, который вы опубликовали, хорош для таких вещей, как jQuery, которые перераспределяются и могут быть или не быть в среде AMD. В идеале каждый плагин jQuery уже установил бы.

Я предпочитаю, чтобы включенные библиотеки были как можно более чистыми, поэтому глобальная конфигурация shim на странице кажется самым чистым решением для меня. Таким образом, обновления становятся более безопасными, и CDN становятся возможностью.

Ответ 2

Есть несколько предостережений с использованием конфигурации шайбы в RequireJS, указываемой на http://requirejs.org/docs/api.html#config-shim. А именно: "Не смешивайте загрузку CDN с конфигурацией прокладки в сборке", когда вы используете оптимизатор.

Я искал способ использовать один и тот же код плагина jQuery на сайтах как с, так и без RequireJS. Я нашел этот фрагмент для плагинов jQuery в https://github.com/umdjs/umd/blob/master/jqueryPlugin.js. Вы переносите свой плагин в этот код, и он будет работать в любом случае.

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

}));

Кредит отправляется в jrburke; как и многие javascript, он функционирует внутри функций, действующих на другие функции. Но я думаю, что я распаковал то, что он делает.

Аргумент функции factory в первой строке сам является функцией, которая вызывается для определения плагина в аргументе $. Когда нет совместимого с AMD загрузчика, он вызывается непосредственно для определения плагина на глобальном объекте jQuery. Это точно так же, как и общая идиома определения плагина:

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

Если есть загрузчик модуля, тогда factory регистрируется как обратный вызов для загрузчика, который будет вызываться после загрузки jQuery. Загружаемая копия jQuery является аргументом. Это эквивалентно

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

Ответ 3

Так же, как FYI для всех некоторых плагинов jquery, уже используют amd/require, поэтому вам не нужно объявлять что-либо в прокладке. На самом деле это может вызвать проблемы для вас в некоторых случаях.

Если вы посмотрите в jquery cookie JS, вы увидите определение вызовов и require ([ "jquery" ]).

а в jquery.js вы увидите вызов для определения ( "jquery", [], function()...