3

Web サイトのすべての JavaScript コードに対して単一の構成オブジェクトを作成することに関心があります。このセットアップの例であるhttps://github.com/requirejs/example-multipage-shimを見つけました。

https://github.com/requirejs/example-multipage-shim (私の強調)から: shim 構成では、page1.html に data-main="js/page1" を使用する代わりに、依存関係をページに含める必要があるため、この例では、HTML ページの require 呼び出しをインライン化します。代わりに data-main が使用された場合、'js/page1' は依存関係をインライン化できず、代わりに 'common' および 'app/main1' ビルド レイヤーに依存してモジュールを保持します。ビルド上。

太字の文がわかりません。「js/page1」が存在する場合、依存関係を宣言できなかったということですか? 依存関係をインライン化するとはどういう意味ですか? 何にインライン？HTML ファイルですか、それとも JavaScript ファイルですか。

シム構成に関する API ドキュメントを読みましたが、オプティマイザーに課せられる制限が明確ではありません。

https://github.com/requirejs/example-multipage-shim/blob/master/www/page1.htmlから:

    <script src="js/lib/require.js"></script>
    <script>
        //Load common code that includes config, then load the app
        //logic for this page. Do the require calls here instead of
        //a separate file so after a build there are only 2 HTTP
        //requests instead of three.
        require(['./js/common'], function (common) {
            //js/common sets the baseUrl to be js/ so
            //can just ask for 'app/main1' here instead
            //of 'js/app/main1'
            require(['app/main1']);
        });
    </script>

以下が間違っているのはなぜですか？「app/main1」がブートストラップ (data-main) コードとは別のモジュールにある必要があるのはなぜですか?

    <script src="js/lib/require.js"></script>
    <script>
        require(['js/common'], function (common) {
            var underscore = require('underscore');
            // ...
        });
    </script>
4

3 に答える 3

0

各モジュールを個別のjavascriptファイルで（defineを使用して）定義することをお勧めします。それ以外の場合は、物理的な場所が同じであるため、複数のモジュールを同時にロードしても意味がありません。ほとんどの場合、関数defineを使用するだけで済みます。ブートストラップモジュールでのみ、関数requireを使用する必要があります。

require.jsを使用している場合、require.configオブジェクトと最初のブートストラップを含む1つのモジュール（bootstrap.js）があります。htmlページには、1つのスクリプトのみを含める必要があります。data-main属性値としてブートストラップを使用したrequire.js：

HTML：

<script src="js/lib/require.js" data-main="bootstrap"></script>

ブートストラップ：

require.config = {
   baseUrl: 'js',
   paths: {
     ...
   },
   shim: {
   }
   ...
};

// initial bootstrap
require(['jquery', 'angular', 'app'], function($, angular) {
   // do bootstrap
});

モジュール：

define(['jquery'], function($) {
   // do sth with app
});

編集：質問を少し誤解しました。

data-main属性を使用するときにhtmlページでインライン依存関係を使用できない理由は、それらのロードに失敗する可能性が高いためです。どのコードブロックが最初に実行されますか？データメインのブートストラップjsまたはインラインコード？ブートストラップjsファイルが最初にロードされ、に設定さbaseUrlれる'js'場合、インラインコードはrequire('common')の代わりにを使用する必要がありrequire('js/common')ます。ただし、インラインコードが最初に読み込まれる場合は、である必要がありますrequire('js/common')。

他のrequireブロック内にある理由require('app/main1')は同じです。モジュール'common'はbaseUrlをに変更し'js'ます。また、「app / main」には、 「common」のshim構成の一部が必要になる可能性があります。これは、共通モジュール（shim configを使用）が最初にロードされていることを確認する唯一の方法です。

于 2012-12-29T17:48:55.833 に答える
0

shim構成を使用する場合は、非同期でロード可能にする各 shim に一致するパス構成プロパティを追加します。

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

shim モジュールは、define()他の実際のモジュールと同様に依存関係として使用できます。（少なくともそれは私の経験です！）

于 2012-12-29T23:09:32.950 に答える