必要な理由とシム設定を使用するタイミング

こちらのAPIからrequirejsドキュメントを読みました

requirejs.config({
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                //Using a function allows you to call noConflict for
                //libraries that support it, and do other cleanup.
                //However, plugins for those libraries may still want
                //a global. "this" for the function will be the global
                //object. The dependencies will be passed in as
                //function arguments. If this function returns a value,
                //then that value is used as the module export value
                //instead of the object found via the 'exports' string.
                return this.Foo.noConflict();
            }
        }
    }
});

しかし、私はそれのシムの一部を取得していません。なぜシムを使用する必要があり、どのように構成する必要がありますか？

シムを使用する理由と時期を例を挙げて説明してください。ありがとう。

シムの主な用途は、AMDをサポートしないライブラリでの使用ですが、それらの依存関係を管理する必要があります。たとえば、上記のバックボーンとアンダースコアの例では、バックボーンにはアンダースコアが必要であることを知っているので、次のようにコードを記述したとします。

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

RequireJSは、UnderscoreとBackboneの両方の非同期要求を開始しますが、どちらが最初に戻るのかわからないため、Backboneが読み込まれる前にUnderscoreで何かをしようとする可能性があります。

注：このアンダースコア/バックボーンの例は、これらの両方のライブラリがAMDをサポートする前に作成されました。しかし、この原則は、AMDをサポートしない今日のライブラリーにも当てはまります。

「init」フックを使用すると、他の高度なことを実行できます。たとえば、ライブラリは通常、2つの異なるものをグローバル名前空間にエクスポートするが、それらを単一の名前空間で再定義する場合などです。または、ロードしているライブラリのメソッドにサルのパッチを適用したい場合もあります。

その他の背景：

• RequireJS 2.0にアップグレードすると、注文プラグインが過去にこれをどのように解決しようとしたかに関するいくつかの履歴が得られます。
• 別の適切な説明については、Aaron Hardyによるこの記事の「モジュール以外のロード」セクションを参照してください。

RequireJS APIドキュメントに従って、shimを使用すると

依存関係を宣言してモジュール値を設定するためにdefine（）を使用しない古い従来の「ブラウザグローバル」スクリプトの依存関係、エクスポート、およびカスタム初期化を構成します。

-依存関係の構成

2つのjavascriptモジュール（moduleAとmoduleB）があり、そのうちの1つ（moduleA）が他のモジュール（moduleB）に依存しているとします。これらは両方とも独自のモジュールに必要なので、require（）またはdefine（）で依存関係を指定します

require(['moduleA','moduleB'],function(A,B ) {
    ...
}

しかし、それ自体がAMDに従う必要があるため、どれが早期にフェッチされるかはわかりません。これはシムが助けになるところです。

require.config({
    shim:{
       moduleA:{
         deps:['moduleB']
        } 
    }

})

これにより、moduleAがロードされる前にmoduleBが必ずフェッチされるようになります。

-エクスポートの構成

Shimエクスポートは、グローバルオブジェクト（もちろん、ブラウザーを使用している場合はウィンドウ）のどのメンバーが実際のモジュール値であるかをRequireJSに通知します。moduleAがそれ自体をwindow'modA'として追加すると（jQueryと同じようにアンダースコアがそれぞれ$と_として追加されます）、エクスポート値を 'modA'にします。

require.config({
    shim:{
       moduleA:{
         exports:'modA'
        } 
    }

RequireJSにこのモジュールへのローカル参照を提供します。グローバルmodAはまだページにも存在します。

-古い「ブラウザグローバル」スクリプトのカスタム初期化

これはおそらく、shim configの最も重要な機能であり、「ブラウザグローバル」、「AMD以外」のスクリプト（モジュールパターンにも従わない）を独自のモジュールの依存関係として追加できます。

moduleBが、2つの関数funcA（）とfuncB（）だけの単純な古いJavaScriptであるとしましょう。

function funcA(){
    console.log("this is function A")
}
function funcB(){
    console.log("this is function B")
}

これらの関数はどちらもウィンドウスコープで使用できますが、RequireJSでは、混乱を避けるために、グローバル識別子/ハンドルを通じてこれらを使用することをお勧めします。したがって、シムを次のように構成します

shim: {
    moduleB: {
        deps: ["jquery"],
        exports: "funcB",
        init: function () {
            return {
                funcA: funcA,
                funcB: funcB
            };
        }
    }
}

init関数からの戻り値は、「exports」文字列を介して見つかったオブジェクトの代わりに、モジュールのエクスポート値として使用されます。これにより、独自のモジュールでfuncBを使用できます。

require(["moduleA","moduleB"], function(A, B){
    B.funcB()
})

これがお役に立てば幸いです。

宣言するには、requirejs.configにパスを追加する必要があります。例：

requirejs.config({
    paths: {
          'underscore' : '.../example/XX.js' // your JavaScript file
          'jquery' : '.../example/jquery.js' // your JavaScript file
    }
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});