2012-01-04 13 views
6

私はRequireJS noobです。 「require.config」を使用し、jQueryとは異なる名前のjQueryへのパスを含めると、結果は期待通りにはなりません。In RequireJS - パスにjQuery名をエイリアスできません。

ここでは、私の問題について簡単に説明します。ファイルの

構造ここで

<html> 
<head> 
    <title>BackboneJS Modular app with RequireJS</title> 
    <script data-main="scripts/main" src="scripts/libs/require.js"></script> 
</head> 
<body> 
    <h3>BackboneJS is awesome</h3> 
</body> 
</html> 

スクリプトタグの参照はスクリプト/ LIBSに必要

root 
├── Index.htm 
└── scripts 
    ├── libs 
    │   ├── jquery-1.7.1.js 
    │   └── require.js 
    ├── main.js 
    └── someModule.js 

index.htmを。 requireが実行されると、scriptsディレクトリのmain.jsというJavaScriptファイルが実行されます。

main.js私の経験で

require.config({ 
    "paths": { 
      "mod1": "someModule" 
    } 
}); 
require(["mod1"], function (sm) { 
    console.log(sm.someValue); 
}); 

「MOD1は、」それはrequire.configパスのと必要とする方法では、同じ参照されます限り、何もすることができます。ただ、完全性について

someModule.js

define([], function() { 
    console.log(); 
    return { someValue: "abcd" }; 
}); 

私はjQueryのを含む場合、知覚心変わりが発生someModule.js

が含まれています。

次のmain.jsでは、jQueryをconfigとrequireメソッドに追加しました。 jQueryのすべての追加で

Main.js

require.config({ 
    "paths": { 
     "jquery": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jquery"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 

まだ動作しているようです。 "console.log($)"はjQuery関数を記述します。

今、キッカーです。次のコードでは、私は両方のパスに「jqueryA」に「jqueryのを」変更し、

require.config({ 
    "paths": { 
     "jqueryA": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jqueryA"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 

を必要と今「はconsole.log($)は、」nullを書き込みます。

これは期待する必要がありますか?その名前がjqueryでなければならない理由はありますか?mod1の場合は何でもかまいません。

私は問題なくこれを回避できますが、この問題は奇妙に見えます。私は、RequireJSとjQueryファイルを組み合わせて使うことができますが、jQueryにアップデートがある場合、新しいjQueryを含めるためにRequireJSに依存したくありません。

答えて

9

jQuery 1.7では、AMDローディングをサポートすることに決めました。これを行うために、jQueryオブジェクトへの参照を戻す 'jquery'という名前のモジュールを定義します。 jqueryへのパスを別の名前(例えば 'jqueryA')で定義すると、あなたが思っている通りに物事が厳密に破られるわけではありません。

jqueryスクリプトは、自分自身をjqueryという名前のモジュールとして定義しています。これは、アプリケーションのrequireに登録されています。あなたのパスのショートカットに「jquery」という名前をつけ、jqueryが依存関係としてロードされたとき、requireはjquery-1.7.1.jsで定義されたjqueryモジュールを実際に参照していました。モジュールのショートカットjqueryAに名前を付けると、jqueryスクリプト自体が 'jquery'という名前のモジュール以外の参照を渡すことがないため、未定義の参照を参照しています。それはばかげている、私は知っている。

jqueryスクリプトは、モジュールを「jquery」として定義し、単に「jquery」として参照することを想定しています。あなたが別の名前としてそれを参照(とボーナスとして、他のロードされたjqueryのライブラリとの競合からそれを維持)、このメソッドを使用する場合:

Use requirejs and jquery, without clobbering global jquery?

+0

ありがとう!この知識で私は自分のjquery/requirejs問題を解決しました。 – bunnyhero

2

私は私の問題の答えを見つけたと思います。

は、必要に応じてAMDがモジュールに https://github.com/documentcloud/underscore/pull/338#issuecomment-3253751

を登録するために)(定義コールここでは、以前のリンクからの引用です。アンダースコアにもかかわらず、私はそれがJQueryにも関係していると信じています。

すべてのAMDローダーは、通常の構成がそのように何 希望を行うには、「パス」と呼ばれ、部分的 パスにモジュールIDをマッピングすることができ:

requirejs.config({ パス: アンダースコア: 'js/libs/underscore-1.2.3.min' }}); require(['underscore']、function(){});アンダースコアは、バックボーンのような他の上位レベルのモジュールで使用されているため、一般的な依存関係 の名前を使用して の共通依存関係を伝達する必要があり、その依存関係を「アンダースコア」と呼ぶのが理にかなっています。 パスの設定は、その依存関係に使用したい特定のURLへのマッピングを行う方法を提供します( )。

AMDと名前付きモジュールの問題について非常にうまく説明します。

名前付き定義のAMDモジュール。どんな利益のためにそんなに痛み? http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html

上記のリンクからの引用適切にモジュールを消費する唯一の方法はで、設定ファイルに再びハードコードにその名前を エンド開発者を強制する場合/別の 名前でモジュールをロードする必要がありますそれらの開発者への最初の場所でのモジュールで 消費ポイント、(その点でのみ)なぜ廃棄物の時間、労力と ハードコードネーム(おろか原因 悲しみ別のソースから)?

この記事では、James Burkは名前モジュールを使用しないことをお勧めします。 https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

通常は、名前のモジュールを登録し、代わりに匿名のモジュールとして を登録しないでください。

これはあなたのコードのユーザーが自分のプロジェクトのレイアウトに適した名前に あなたのライブラリーの名前を変更することができます。また は、他のライブラリ によって使用されている依存関係名にモジュールをマップすることができます。たとえば、Zepto.jsは、 'jquery'モジュールIDのモジュール義務を満たすためにマップすることができます( )。 jQueryの••

例外が吸うアンダースコア:

は、名前のモジュールとして登録しないいくつかの注目すべき例外があります。例外は、ノーベルにとっては難しい。

+0

私の答えをチェックしてください。うまくいけば、それはあなたのために物事をクリアします。説明のために –

4

ここでは私の問題を回避するには、私が読ん実装に基づいて、ですRequire.JS 2.1.0:

define.amd.jQuery = false; 

require.config({ 
    ... 

    shim: { 
     "jQuery-1.8.2": { 
      exports: "jQuery" 
     } 
    } 

    ... 
});