Require.jsエラー：モジュールのロードタイムアウト：バックボーン、jquerymobile

Question

私は私のコードを最適化するためにr.jsを使用しようとしていますが、私はこのエラーに実行し続ける：

はの依存関係をトレース：

Error: Load timeout for modules: backbone,jquerymobile 

にinit

私が実行しているコマンドはこれです：

$ java -classpath /Users/dixond/build-tools/rhino1_7R4/js.jar:/Users/dixond/build-tools/closurecompiler/compiler.jar org.mozilla.javascript.tools.shell.Main /Users/dixond/build-tools/r.js/dist/r.js -o /Users/dixond/Sites/omm_mobile/js/build.js 

マイbuild.jsファイルは次のようになります。

({ 
    //appDir: "some/path/", 
    baseUrl : ".", 
    mainConfigFile : 'init.js', 
    paths : { 
     jquery : 'libs/jquery-1.8.3.min', 
     backbone : 'libs/backbone.0.9.9', 
     underscore : 'libs/underscore-1.4.3', 
     json2 : 'libs/json2', 
     jquerymobile : 'libs/jquery.mobile-1.2.0.min' 
    }, 
    packages : [], 
    shim : { 
     jquery : { 
      exports : 'jQuery' 
     }, 
     jquerymobile : { 
      deps : ['jquery'], 
      exports : 'jQuery.mobile' 
     }, 
     underscore : { 
      exports : '_' 
     }, 
     backbone : { 
      deps : ['jquerymobile', 'jquery', 'underscore'], 
      exports : 'Backbone' 
     } 
    }, 
    keepBuildDir : true, 
    locale : "en-us", 
    optimize : "closure", 
    skipDirOptimize : false, 
    generateSourceMaps : false, 
    normalizeDirDefines : "skip", 
    uglify : { 
     toplevel : true, 
     ascii_only : true, 
     beautify : true, 
     max_line_length : 1000, 
     defines : { 
      DEBUG : ['name', 'false'] 
     }, 


     no_mangle : true 
    }, 
    uglify2 : {}, 
    closure : { 
     CompilerOptions : {}, 
     CompilationLevel : 'SIMPLE_OPTIMIZATIONS', 
     loggingLevel : 'WARNING' 
    }, 
    cssImportIgnore : null, 
    inlineText : true, 
    useStrict : false, 
    pragmas : { 
     fooExclude : true 
    }, 
    pragmasOnSave : { 
     //Just an example 
     excludeCoffeeScript : true 
    }, 
    has : { 
     'function-bind' : true, 
     'string-trim' : false 
    }, 
    hasOnSave : { 
     'function-bind' : true, 
     'string-trim' : false 
    }, 
    //namespace: 'foo', 
    skipPragmas : false, 
    skipModuleInsertion : false, 
    optimizeAllPluginResources : false, 
    findNestedDependencies : false, 
    removeCombined : false, 
    name : "init", 
    out : "main-built.js", 
    wrap : { 
     start : "(function() {", 
     end : "}());" 
    }, 
    preserveLicenseComments : true, 
    logLevel : 0, 
    cjsTranslate : true, 
    useSourceUrl : true 
}) 

そして、私のinit.js次のようになります。私は、このビルドプロセスに間違った

requirejs.config({ 
     //libraries 
     paths: { 
      jquery:  'libs/jquery-1.8.3.min', 
      backbone:  'libs/backbone.0.9.9', 
      underscore: 'libs/underscore-1.4.3', 
      json2 :  'libs/json2', 
      jquerymobile: 'libs/jquery.mobile-1.2.0.min' 
     }, 

     //shimming enables loading non-AMD modules 
     //define dependencies and an export object 
     shim: { 
      jquerymobile: { 
       deps: ['jquery'], 
       exports: 'jQuery.mobile' 
      }, 
      underscore: { 
       exports: '_' 
      }, 
      backbone: { 
       deps: ['jquerymobile', 'jquery', 'underscore', 'json2'], 
       exports: 'Backbone' 
      } 
     } 
    }); 


requirejs(["backbone",], function(Backbone) { 
    //Execute code here 
}); 

何をしているのですか？

Answer 1

Require.jsには、waitSecondsというConfigオプションがあります。これは役に立ちます。

requirejs.config({ 
    baseUrl: "scripts", 
    enforceDefine: true, 
    urlArgs: "bust=" + (new Date()).getTime(), 
    waitSeconds: 200, 
    paths: { 
     "jquery": "libs/jquery-1.8.3", 
     "underscore": "libs/underscore", 
     "backbone": "libs/backbone" 
    }, 
    shim: { 
     "underscore": { 
      deps: [], 
      exports: "_" 
     }, 
     "backbone": { 
      deps: ["jquery", "underscore"], 
      exports: "Backbone" 
     }, 
    } 
}); 

define(["jquery", "underscore", "backbone"], 
    function ($, _, Backbone) { 
     console.log("Test output"); 
     console.log("$: " + typeof $); 
     console.log("_: " + typeof _); 
     console.log("Backbone: " + typeof Backbone); 
    } 
); 

Answer 2

エラー

私は最近requireJSを使用してangularJSプロジェクトに非常によく似た問題を持っていた：

RequireJS waitSeconds

はここwaitSecondsが使用されている例です。

私はクロームカナリアビルド（Version 34.0.1801.0 canary）を使用しても安定したバージョンがインストール（Version 32.0.1700.77）Developer consoleオープンでアプリをロードするときとまったく同じ問題を示していたんだ：デベロッパーコンソールがキーである

Uncaught Error: Load timeout for modules 

をここではがコンソールが開いていないときにエラーが発生しなかったので、ここに。私はすべてのクロム設定をリセットして、プラグインをアンインストールしてみましたが、これまで何も助けてくれませんでした。

ソリューション

大きなポインタがwaitSeconds設定オプションについて（以下のリソースを参照してください）、Googleのグループディスカッションでした。 0に設定すると私の問題は解決しました。これは、タイムアウトを無限に設定するだけなので、これをチェックしません。しかし、開発中の修正として、これは問題ありません。 Example config：

<script src="scripts/require.js"></script> 
<script> 
    require.config({ 
    baseUrl: "/another/path", 
    paths: { 
     "some": "some/v1.0" 
    }, 
    waitSeconds: 0 
    }); 
    require(["some/module", "my/module", "a.js", "b.js"], 
    function(someModule, myModule) { 
     //This function will be called when all the dependencies 
     //listed above are loaded. Note that this function could 
     //be called before the page is loaded. 
     //This callback is optional. 
    } 
); 
</script> 

このエラーの最も一般的な他の原因は次のとおりです。モジュール内

• エラー構成で
• 間違ったパス（pathsとbaseUrlオプションをチェック）
• configにダブルエントリー

その他のリソース

トラブルシューティングのページrequireJS：http://requirejs.org/docs/errors.html#timeoutポイント2,3,4が該当します。

同様のSOの質問：

Ripple - Uncaught Error: Load timeout for modules: app http://requirejs.org/docs/errors.html#timeout関連するGoogleグループディスカッション：waitSeconds = 7（7秒）を0に設定した場合

ためhttps://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

Answer 3

デフォルト値は、タイムアウトが完全に無効になっています。

SRC：ケースの他にhttp://requirejs.org/docs/api.html

Answer 4

は、この問題を持っている（私がしたように）まだそれに苦しんで、この問題はまた、例えば、循環依存から生じ得ますAはBに依存し、BはAに依存する

RequireJS docs循環依存が「ロードタイムアウト」エラーを引き起こす可能性はありませんが、ここでは2つの異なる循環依存性を観察しました。

Answer 5

モバイルSafari 6.0.0（iOS 6.1.4）でテストを実行している場合にのみ、このエラーが発生します。 waitSeconds: 0は私に今すぐ成功したビルドを与えてくれました。これでビルドが失敗した場合に更新します

Answer 6

Require.jsは、プロジェクトが大きなライブラリに依存する可能性があるため、タイムアウトになります。デフォルトのタイムアウトは7秒です。この設定オプション（waitSecondsと呼ばれる）の値を増やすことはもちろんそれを解決しますが、正しいアプローチではありません。 正しいアプローチはページの読み込み時間を改善することです。ページの読み込み速度を上げるための最高のテクニックの1つはミニ化 - コードを圧縮するプロセスです。 r.jsやwebpackのような小型化のための良いツールがいくつかあります。