2012-06-02 13 views
31

を使用してjQuery、Underscore、およびBackboneをロードしています。RequireJSで少し実験しています2.0.1私の目標は、正しくjQuery、Underscore、およびBackboneをロードすることです。元のRequireJS docから、私は、著者Burkeがこの新しいリリースにnew config option called shimを追加したことを発見しました。RequireJS 2.0.1とshim

は、その後、私はダウンし、ここでこのようなものを書いた:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing time</title> 
     <script data-main="scripts/main" src="scripts/require.js"></script> 
    </head> 
    <body> 
     <h1>Testing time</h1> 
    </body> 
</html> 

scripts/main.js

requirejs.config({ 
    shim: { 
     'libs/jquery': { 
      exports: '$' 
     }, 
     'libs/underscore': { 
      exports: '_' 
     }, 
     'libs/backbone': { 
      deps: ['libs/underscore', 'libs/jquery'], 
      exports: 'Backbone' 
     } 
    } 
}); 


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'], 

    function (jQueryLocal, underscoreLocal, backboneLocal) { 
     console.log('local', jQueryLocal); 
     console.log('local', underscoreLocal); 
     console.log('local', backboneLocal); 
     console.log('global', $); 
     console.log('global', _); 
     console.log('global', Backbone); 
    } 
); 

すべてが非常にうまく動作するようだが、私は何かが欠けてる気がします、私はあることを知っているのAMDed jQueryとアンダースコアのバージョンが、 tupはとてもシンプルなので、なぜ私はそれらを使うべきか理解できません。

この設定は正しいですか、何か不足していますか?

+0

「json2」についてはどうですか?それも必要ですか? – Henry

答えて

32

ライブラリがまだモジュールを宣言するためにdefine()を呼び出さない場合は、 "shim" configを使用する必要があります。 jQueryはこれを既に実行しているので、シムの設定から削除することができます。上記のコードはそのまま動作しますが、シムの作業が完了する前にjQueryがdefine()を呼び出すため、jQueryのエクスポートシム設定は無視されます。それは以下/ポータブル信頼性がある

  1. ::モジュールを定義するには、スクリプトの呼び出しdefine()を持つ対シムと

    欠点は、すべての開発者は、シムの設定を行うと、ライブラリの変更を追跡する必要があります。ライブラリの作成者がライブラリ内でインライン展開すると、誰もが効率的に利益を得ることができます。 umdjs/umdのコードテンプレートは、そのコードの変更に役立ちます。

  2. シムの設定が適切でない場合、実際のライブラリをロードする前にshim depsを読み込んで動作します。したがって、それは並列よりも少しだけ連続した読み込みです。 define()を使用するとすべてのスクリプトを同時に読み込むことができます。最終的な展開のためのビルド/最適化を行い、すべてのスクリプトを1つのスクリプトにまとめると、これは欠点ではありません。何をやっている

8

は正しいですが、それはAMD(非同期モジュール定義)モジュールをエクスポートするためのjQueryは、シムの設定である必要はありません。アンダースコアは、追加後すぐにAMD/Require.jsに対するサポートを削除しました。Why underscore.js removed support for AMD

シムは、AMDモジュールをエクスポートしないライブラリを使用する便利なものです。使用しているライブラリがAMDをサポートしているか、または2つのバージョン(AMDをサポートするバージョンとグローバル変数)を持っている場合は、AMDバージョンを使用する必要があります。最初にAMDを使用するのと同じ理由で、またそのライブラリにrequire.js(またはAlmond)が含まれていて、不要なファイルサイズがプロジェクトに追加されている可能性があるため、AMDバージョンを使用するべきです。

0

jqueryはamdモジュール定義にjqueryという名前を追加するので、元の例(jqueryへのパスは 'libs/jquery'に設定されています)ではjqueryを実際に避けることはできますか?

define( "jquery"、[]、function(){return jQuery;});

jquery.jsをbaseurlディレクトリに配置してjquery amdモジュールを期待通りに定義するか、元の例のように "shim"する必要があります。