wake-up-neo.com

Require.js Fehler: Ladezeit für Module: Backbone, Jquerymobile

Ich versuche, r.js zu verwenden, um meinen Code zu optimieren, aber ich renne weiter zu diesem Fehler:

Abhängigkeiten verfolgen für: init

Error: Load timeout for modules: backbone,jquerymobile

Der Befehl, den ich ausgeführt habe, lautet wie folgt:

$ 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

Meine build.js-Datei sieht folgendermaßen aus:

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

Und meine init.js sieht so aus:

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

Was mache ich falsch in diesem Build-Prozess?

javascriptjquerybackbone.jsrequirejs
57
Devin Dixon

Require.js hat eine Config-Option namens waitSeconds. Das kann helfen.

RequireJS waitSeconds

Hier ist ein Beispiel, bei dem waitSeconds verwendet wird:

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);
    }
);
103
Mike Barlow - BarDev

Der Fehler

Ich hatte kürzlich ein sehr ähnliches Problem mit einem angularJS-Projekt, das requireJS verwendete.

Ich verwende Chrome Canary Build (Version 34.0.1801.0 canary), hatte aber auch eine stabile Version (Version 32.0.1700.77), die genau das gleiche Problem zeigte, wenn die App mit Developer console geöffnet wurde:

Uncaught Error: Load timeout for modules

Die Entwicklerkonsole ist hier der Schlüssel, da die Fehlermeldung nicht angezeigt wurde, wenn die Konsole nicht geöffnet war. Ich habe versucht, alle Chrome-Einstellungen zurückzusetzen, alle Plugins zu deinstallieren, ... bisher hat nichts geholfen. 

Die Lösung

Der große Hinweis war eine Google-Gruppendiskussion (siehe Ressourcen unten) über die Option waitSeconds config. Wenn Sie diesen Wert auf 0 setzen, wurde mein Problem gelöst. Ich würde das nicht einchecken, da dies den Timeout auf unendlich setzt. Als Fix während der Entwicklung ist dies jedoch in Ordnung. Beispiel 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>

Die häufigsten anderen Ursachen für diesen Fehler sind:

  • fehler in Modulen
  • falsche Pfade in der Konfiguration (Option paths und baseUrl markieren)
  • doppeleintrag in Konfig

Mehr Ressourcen

Fehlerbehebungsseite von requirJS: http://requirejs.org/docs/errors.html#timeout Punkt 2, 3 und 4 können von Interesse sein.

Ähnliche SO - Frage: Ripple - Nicht abgerufener Fehler: Ladezeit für Module: app http://requirejs.org/docs/errors.html#timeout

Eine verwandte Google-Gruppendiskussion: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

41
hcpl

Falls andere dieses Problem haben und immer noch damit zu kämpfen haben (wie ich es war), kann dieses Problem auch aus zirkularen Abhängigkeiten entstehen, z. A hängt von B ab und B hängt von A ab.

Die RequireJS-Dokumente erwähnen nicht, dass zirkuläre Abhängigkeiten den Fehler "Zeitlimit beim Laden" verursachen können, aber ich habe es jetzt für zwei verschiedene zirkulare Abhängigkeiten beobachtet.

17
Aaron

Standardwert für waitSeconds = 7 (7 Sekunden)

Bei Einstellung auf 0 ist das Timeout vollständig deaktiviert.

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

15
Eduscho

Der Grund für das Problem ist, dass Require.js das Zeitlimit überschreitet, da das Projekt Abhängigkeiten zu großen Bibliotheken haben kann. Das Standard-Timeout beträgt 7 Sekunden. Das Erhöhen des Werts für diese Konfigurationsoption (so genannte waitSeconds) löst dies natürlich, ist jedoch nicht der richtige Ansatz. Der korrekte Ansatz wäre, die Ladezeit der Seite zu verbessern. Eine der besten Techniken, um das Laden einer Seite zu beschleunigen, ist minification - das Komprimieren des Codes. Es gibt einige gute Werkzeuge für die Minifizierung wie r.js oder webpack . 

1
Lyudmyla

Diese Fehlermeldung wird nur angezeigt, wenn Tests unter Mobile Safari 6.0.0 (iOS 6.1.4) ausgeführt werden. waitSeconds: 0 hat mir vorerst einen erfolgreichen Build gegeben. Ich werde ein Update durchführen, falls mein Build erneut fehlschlägt

0
Adam Spence