J'essaie d'utiliser r.js pour optimiser mon code mais je continue à courir à cette erreur:
Traçage des dépendances pour: init
Error: Load timeout for modules: backbone,jquerymobile
La commande que je lance est la suivante:
$ 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
Mon fichier build.js ressemble à ceci:
( {
//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
})
Et mon init.js ressemble à ceci:
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
});
Qu'est-ce que je fais mal dans ce processus de construction?
Require.js a une option de configuration appelée waitSeconds. Cela peut aider.
Voici un exemple d'utilisation de 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);
}
);
J'ai récemment eu un problème très similaire avec un projet angularJS
utilisant requireJS
.
J'utilise Chrome build canary (Version 34.0.1801.0 canary
), mais une version stable est également installée (Version 32.0.1700.77
). Elle affiche exactement le même problème lors du chargement de l'application avec Developer console
ouvert:
Uncaught Error: Load timeout for modules
La console du développeur est la clé ici car je n'ai pas eu l'erreur quand la console n'était pas ouverte. J'ai essayé de réinitialiser tous les paramètres de chrome, de désinstaller un plugin,… rien n'y faisait.
Le gros pointeur était une discussion de groupe de Google (voir les ressources ci-dessous) sur l’option waitSeconds
config. Régler cela à 0 a résolu mon problème. Je ne voudrais pas vérifier ceci car cela fixe simplement le délai d'attente à l'infini. Mais comme solution au développement, c'est très bien. Exemple de configuration :
<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>
Les autres causes les plus courantes de cette erreur sont:
paths
et baseUrl
)La page de dépannage de requireJS: http://requirejs.org/docs/errors.html#timeout point 2, 3 et 4 peut présenter un intérêt.
Question SO similaire: Ondulation - Erreur non capturée: Délai de chargement des modules: app http://requirejs.org/docs/errors.html#timeout
Discussion relative aux groupes Google: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg
Si d’autres ont ce problème et le luttent toujours (comme j’étais), ce problème peut également provenir de dépendances circulaires, par exemple. A dépend de B et B dépend de A.
La RequireJS docs ne mentionne pas que les dépendances circulaires peuvent provoquer l'erreur "Load timeout", mais je l'ai maintenant observée pour deux dépendances circulaires différentes.
Valeur par défaut pour waitSeconds = 7 (7 secondes)
Si défini sur 0, le délai d'attente est complètement désactivé.
La raison de ce problème est que Require.js s'exécute dans le délai d'attente, car le projet peut avoir des dépendances par rapport à des bibliothèques volumineuses. Le délai d'attente par défaut est de 7 secondes. L'augmentation de la valeur de cette option de configuration (appelée waitSeconds) la résout bien sûr mais ce n'est pas la bonne approche. Une bonne approche consisterait à améliorer le temps de chargement de la page. Une des meilleures techniques pour accélérer le chargement d'une page est minification - le processus de compression du code. Il existe quelques bons outils de minification comme r.js ou webpack .
Je ne reçois cette erreur que lors de l'exécution de tests sur Mobile Safari 6.0.0 (iOS 6.1.4). waitSeconds: 0
m'a donné une construction réussie pour l'instant. Je mettrai à jour si ma construction échoue à nouveau