Require.js Errore: timeout di carico per i moduli: spina dorsale, jquerymobile

Question

Sto cercando di usare r.js per ottimizzare il mio codice, ma continuo a correre a questo errore:

dipendenze traccia per: init

Error: Load timeout for modules: backbone,jquerymobile 

Il comando sto facendo funzionare è questo:

$ 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 

Il mio file build.js si presenta così:

({ 
    //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 
}) 

E i miei Init.js assomiglia a questo:

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 
}); 

Che cosa sto facendo di sbagliato in questo processo di generazione?

Answer 1

Require.js ha un'opzione di configurazione chiamata waitSeconds. Questo può aiutare.

RequireJS waitSeconds

Ecco un esempio in cui viene utilizzata waitSeconds:

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

L'errore

Recentemente ho avuto un problema molto simile con un progetto angularJS utilizzando requireJS.

sto usando Chrome accumulo canarino (Version 34.0.1801.0 canary) ma aveva anche una versione stabile installata (Version 32.0.1700.77) che mostra la stessa identica problema durante il caricamento dell'app con Developer console aperta:

Uncaught Error: Load timeout for modules 

La console sviluppatore è la chiave qui poiché non ho ricevuto l'errore quando la console non era aperta. Ho provato a reimpostare tutte le impostazioni di Chrome, disinstallando qualsiasi plugin, ... nulla ha aiutato finora.

La soluzione

La grande puntatore era un gruppo di discussione di Google (vedi Risorse) sull'opzione waitSeconds config. Impostare su 0 per risolvere il problema. Non vorrei controllare questo in quanto questo solo imposta il timeout all'infinito. Ma come soluzione durante lo sviluppo va bene. 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> 

più comuni altre cause di questo errore sono:

• errori nei moduli
• strade sbagliate in configurazione (controllare paths e baseUrl opzione)
• doppia entrata in config

Altre risorse

pagina di risoluzione dei problemi da requireJS: http://requirejs.org/docs/errors.html#timeout punti 2, 3 e 4 possono essere di interesse.

simile in modo domanda: Ripple - Uncaught Error: Load timeout for modules: app http://requirejs.org/docs/errors.html#timeout

Un correlata Google gruppi di discussione: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

Answer 3

Il valore di default per waitSeconds = 7 (7 secondi)

Se impostato su 0, il timeout è completamente disattivato.

src: http://requirejs.org/docs/api.html

Answer 4

In caso altri hanno questo problema e ancora alle prese con essa (come ero), questo problema può anche derivare da dipendenze circolari, ad esempio A dipende da B e B dipende da A.

Il RequireJS docs non menziona che le dipendenze circolari possono causare l'errore "Timeout carico", ma l'ho osservato ora per due diverse dipendenze circolari.

Answer 5

Viene visualizzato questo errore solo durante l'esecuzione di test su Mobile Safari 6.0.0 (iOS 6.1.4). waitSeconds: 0 mi ha dato una build di successo per ora. Aggiornerò se la mia build fallisce ancora su questo

Answer 6

Il motivo per il problema è che Require.js viene eseguito nel timeout poiché il progetto potrebbe avere dipendenze da librerie di grandi dimensioni. Il timeout predefinito è 7 secondi. Aumentare il valore di questa opzione di configurazione (chiamata waitSeconds) lo risolve ovviamente, ma non è l'approccio giusto. L'approccio corretto sarebbe migliorare il tempo di caricamento della pagina. Una delle migliori tecniche per accelerare il caricamento di una pagina è minification - il processo di compressione del codice. Ci sono alcuni buoni strumenti per la minificazione come r.js o webpack.