3

私は以下を持っていますmain.js：

requirejs.config({
    paths: {
        'backbone': 'backbone-min',
        'underscore': 'underscore-min',
        'loader': 'loader-min'
    }
})

この「loader-min.js」ファイルは、次の最適化されたjs ですloader.js。

define(['backbone', 'underscore'], function () {
})

私のHTMLページには以下が含まれています：

<script data-main="/js/main" src="/js/require.js"></script>
<script type="text/javascript">
   requirejs(['loader'], function(loader) {
      ....
   })
</script>

ところで、Firebug コンソールからわかるように、ブラウザは次の URL のみをロードします。

GET /js/require.js
GET /js/main.js
GET /js/loader.js !!! Notice it's loader.js, not loader-min.js
GET /js/backbone-min.js
GET /js/underscore-min.js

したがって、モジュールの場合、で構成されたパスではなく、loaderファイルをロードしようとする問題。値を無視して、縮小/最適化されたファイルではありません。loader.jsmain.jsrequirejs.config

backboneとの正しい値をまだ使用していることは最も奇妙なことですunderscore。ほとんどの場合、常にではありません。たまに読み込みに失敗する/js/backbone.js

RequireJS はmain.js、ブラウザーによって完全に読み込まれて解釈される前に動作を開始するようです。期待される動作ですか？または私のアプリに何か問題がありますか？

requirejs(...)「main.js」が処理された後にのみ関数が実行されるようにするにはどうすればよいですか?

4

1 に答える 1

5

main.js ファイルは非同期で読み込まれます。ただし、このスクリプト タグ (下記) は順次解析されます。そのため、実行の順序を予測する方法はありません (ただし、以下のスクリプトは、非同期呼び出しが戻る前に実行される可能性が最も高くなります)。

<script type="text/javascript">
   // require() and not requirejs()
   require(['loader'], function(loader) { 
      ....
   })
</script>

次のように、main.js ファイルの最後に require 呼び出しを追加します。

require.config({
// configuration.
});

require(['loader'], function(loader) { 
// callback
})

このようにして、RequireJS は、require または define 呼び出しを実行する前に常に「構成」されます。

編集： 私が通常行うこと：

<script src="/js/require.js"></script> <!-- No data-main attribute -->
<script src="/js/config.js"></script> <!-- Explicitly load configuration -->

<script type="text/javascript">
    require.config({
        baseURL: "path/to/base"
    });
    require(["module"], function(module){
        // code
    });
</script>

このようにして、何がどこにロードされるかを明示的に制御できます。また、config.js ファイルを DRY に保ちます。

Jasmine テスト スイートに同じ構成ファイルを使用できるため、通常はブートストラップ HTML に baseURL を設定します。

于 2013-02-25T11:24:11.610 に答える