Dateien laden in einer bestimmten Reihenfolge mit RequireJs

Question

Ich bin neu in RequireJS und ich bin mit der Ladereihenfolge fest.

Ich habe eine globale Projektkonfiguration, die ich brauche, bevor die in js/app/* befindet Module geladen werden.

Hier ist meine struture:

index.html 
config.js 
js/ 
    require.js 
    app/ 
     login.js 
    lib/ 
     bootstrap-2.0.4.min.js 

Hier ist die Datei config.js:

var Project = { 
    'server': { 
     'host': '127.0.0.1', 
     'port': 8080 
    }, 
    'history': 10,  // Number of query kept in the local storage history 
    'lang': 'en',  // For future use 
}; 

Und hier ist meine requirejs Datei (app.js):

requirejs.config({ 
    //By default load any module IDs from js/lib 
    baseUrl: 'js/lib', 
    //except, if the module ID starts with "app", 
    //load it from the js/app directory. paths 
    //config is relative to the baseUrl, and 
    //never includes a ".js" extension since 
    //the paths config could be for a directory. 
    paths: { 
     bootstrap: '../lib/bootstrap-2.0.4.min', 
     app: '../app', 
    }, 
    shim: { 
     'app': { 
      deps: ['../../config'], 
      exports: function (a) { 
       console.log ('loaded!'); 
       console.log (a); 
      } 
     } // Skual Config 
    }, 
}); 

var modules = []; 
modules.push('jquery'); 
modules.push('bootstrap'); 
modules.push('app/login'); 


// Start the main app logic. 
requirejs(modules, function ($) {}); 

Aber einige Male , wenn ich die Seite lade, habe ich ein "Project" undefiniert, da login.js BEVOR config.js geladen wurde.

Wie kann ich config.js zwingen, auf den ersten, egal, was geladen werden?

Hinweis: Ich habe order.js als Plugin für RequireJS gesehen, aber es wird anscheinend nicht unterstützt seit der v2, ersetzt durch shim.

Danke für Ihre Hilfe!

Answer 1

Sie müssen nicht über die Ladereihenfolge Sorge, wenn Sie Ihre js Dateien als AMD-Module definieren. (Oder Sie können die Shim-Konfiguration verwenden, wenn Sie die config.js und login.js nicht ändern können, um define aufzurufen).

config.js sollte wie folgt aussehen:

define({project: { 
    'server': { 
     'host': '127.0.0.1', 
     'port': 8080 
    }, 
    'history': 10,  // Number of query kept in the local storage history 
    'lang': 'en',  // For future use 
}}); 

login.js:

define(['jquery', '../../config'], function($, config) { 

    // here, config will be loaded 
    console.log(config.project) 

}); 

Auch hier sollte Shim Config nur, wenn innerhalb der Module define() Aufruf ist eine Option nicht verwendet werden. heute

Answer 2

lief in ein ähnliches Problem - wir haben Daten Bootstrap, dass wir sicherstellen möchten, bevor alles geladen sonst, und dass das Modul, dass die Daten auszusetzen eingerichtet ist, bevor andere Module ausgewertet werden.

Die einfachste Lösung, die ich gefunden Last, um zu erzwingen ist einfach ein Modul, bevor es weiter mit App-Initialisierung geladen werden erfordern:

require(["bootstrapped-data-setup", "some-other-init-code"], function(){ 
    require(["main-app-initializer"]); 
}); 

Answer 3

Es gibt eine mögliche Lösung eine Warteschlange für die Module geladen werden, zu bauen. In diesem Fall werden alle Module eins nach dem anderen in der genauen Reihenfolge geladen:

var requireQueue = function(modules, callback) { 
    function load(queue, results) { 
    if (queue.length) { 
     require([queue.shift()], function(result) { 
     results.push(result); 
     load(queue, results); 
     }); 
    } else { 
     callback.apply(null, results); 
    } 
    } 

    load(modules, []); 
}; 

requireQueue([ 
    'app', 
    'apps/home/initialize', 
    'apps/entities/initialize', 
    'apps/cti/initialize' 
], function(App) { 
    App.start(); 
});