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