29

私は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への参照に$ドル記号を使用しても機能しないためです。

4

1 に答える 1

40

私が見ている重要なポイント:

  1. jQueryをRequireJSと一緒に使用すると、名前付きモジュール'jquery'(すべて小文字)として登録されます。あなたの例では、これを「jQuery」として使用しようとしています。これは、ロード時に登録されるグローバル関数の名前でもあるため、少し混乱します(ポイント#2を参照)。
  2. デフォルトでは、jQueryは、AMD / RequireJSで使用されている場合でも、グローバル関数「$」および「jQuery」を使用して自身を登録します。この動作をオフにしたい場合は、noConflict関数を呼び出す必要があります。
  3. 次の例に示すように、jQueryへのRequireJS参照をnoConflict呼び出しでラップできます。私の知る限り、これは、グローバルな$または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; } );
    }

更新:上記の情報を反映するように、RequireJSサイトのUsewithjQueryセクションが更新されましたオプティマイザを含むステップバイステップについては、この回答も参照してください。このnoConflictアプローチは、すべてのプラグインがAMD互換である場合にのみ機能することをもう一度強調したいと思います。

于 2013-03-26T23:55:52.683 に答える