web-dev-qa-db-ja.com

requirejsでjQueryプラグインをロード可能にする方法

私はrequirejs + jqueryで作業していますが、jQueryプラグインをrequireでうまく動作させるスマートな方法があるかどうか疑問に思っていました。

たとえば、jQuery-cookieを使用しています。正しく理解できれば、jquery-cookie.jsというファイルを作成できます。

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と互換性があるようにする唯一の方法である場合

javascriptjqueryrequirejs
86
Nicola Peluchetti

あなたはどちらかを行うだけです

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の最後、または

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

jquery-cookieを含める前の任意の場所（たとえば、data-mainが指す場所など）。

投稿した最後のコードブロックは、jQueryのように再配布され、AMD環境にある場合とない場合に適しています。理想的には、すべてのjQueryプラグインが既にセットアップされているはずです。

インクルードされたライブラリをできる限り純粋に保ちたいので、ページごとにグローバルなシム設定が私にとって最もクリーンなソリューションのようです。そうすれば、アップグレードがより安全になり、CDNが可能になります。

66
Hans

http://requirejs.org/docs/api.html#config-shim で指摘されている、RequireJSでshim設定を使用する場合の注意事項があります。つまり、オプティマイザーを使用している場合、「ビルドでCDNロードとshim configを混在させないでください」。

RequireJSを使用するサイトと使用しないサイトの両方で、同じjQueryプラグインコードを使用する方法を探していました。 https://github.com/umdjs/umd/blob/master/jqueryPlugin.js でjQueryプラグインのこのスニペットを見つけました。このコードでプラグインをラップすると、どちらの方法でも適切に機能します。

(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
  };
})
104
Carl Raymond

JqueryプラグインのいくつかすべてのFYIが既にAMD/requireを使用しているので、shimで何も宣言する必要はありません。実際、これを行うと、場合によっては問題が生じる可能性があります。

Jquery cookie JSを見ると、define呼び出しとrequire（["jquery"]）が表示されます。

jquery.jsでは、define（ "jquery"、[]、function（）...の呼び出しが表示されます。

2
TPEACHES