web-dev-qa-db-ja.com

require.jsでjQueryを実装する正しい方法

私はrequire.jsとjQueryの両方の現在の安定したリリースを使用しており、現在このようなjQueryを含めています

requirejs.config({
paths: {
    'jQuery': 'vendor/jquery',
}
});

require(['jQuery'], function(jQuery) {
    log(jQuery); // working
});

取得できないのは、jQueryを明示的に返す必要がないことです。これは（他のモジュールでも）引き続き機能するためです。

require(['jQuery'], function( // nothing here ) {
    log(jQuery); // working
});

JQueryへの参照に$ドル記号を使用しても機能しないため、これが正しい方法であるかどうかはわかりません。

javascriptjqueryrequirejsamd
29
riccardolardi

私が見ているキーポイント：

  1. jQueryをRequireJSと共に使用すると、名前付きモジュール「jquery」として登録されます（すべて小文字）。あなたの例では、それを「jQuery」として使用しようとしていますが、これはロード時に登録するグローバル関数の名前でもあるため、物事を少し混乱させます（ポイント＃2を参照）。
  2. デフォルトでは、jQueryは、AMD/RequireJSで使用される場合でも、グローバル関数「$」および「jQuery」を使用して自身を登録します。この動作をオフにする場合は、noConflict関数を呼び出す必要があります。

  3. 次の例に示すように、noConflict呼び出しでjQueryへのRequireJS参照をラップできます。私が知る限り、これはグローバルな$またはjQueryを必要とする他のモジュールがない場合に推奨されるアプローチです。

    requirejs.config({
    paths: {
        'jquery': 'vendor/jquery',
    }
});

define('jquery-private', ['jquery'], function (jq) {
    return jq.noConflict( true );
});

require(['jquery-private'], function(jq) {
    console.log(jq);      // working
    console.log($);       // undefined
    console.log(jQuery);  // undefined
});

プライベート（noConflict）バージョンを使用するために他のモジュールをマップする方法については、 この質問の答え も参照してください。

詳細な背景については、上記で説明したすべての原因であるjQueryソースコードの次の行を参照してください。

    // Expose jQuery to the global object
    window.jQuery = window.$ = jQuery;

    // Expose jQuery as an AMD module, but only for AMD loaders that
    // understand the issues with loading multiple versions of jQuery
    // in a page that all might call define(). The loader will indicate
    // they have special allowances for multiple jQuery versions by
    // specifying define.AMD.jQuery = true. Register as a named module,
    // since jQuery can be concatenated with other files that may use define,
    // but not use a proper concatenation script that understands anonymous
    // AMD modules. A named AMD is safest and most robust way to register.
    // Lowercase jquery is used because AMD module names are derived from
    // file names, and jQuery is normally delivered in a lowercase file name.
    // Do this after creating the global so that if an AMD module wants to call
    // noConflict to hide this version of jQuery, it will work.
    if ( typeof define === "function" && define.AMD && define.AMD.jQuery ) {
        define( "jquery", [], function () { return jQuery; } );
    }

UPDATE：RequireJSサイトのjQueryセクションで使用 は、上記の情報を反映するように更新されました。オプティマイザーを含む段階的な手順については、 this answer も参照してください。このnoConflictアプローチは、allプラグインがAMD互換である場合にのみ機能することを強調したいだけです。

39
explunit