Caricare i file nell'ordine specifico con RequireJs

Question

Sono nuovo di RequireJS e sono bloccato con l'ordine di caricamento.

Ho una configurazione di progetto globale che ho bisogno di caricare prima dei moduli situati in js/app/*.

Ecco la mia struture:

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

Ecco il file 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 
}; 

Ed ecco il mio file requirejs (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 ($) {}); 

Ma alcune volte , quando carico la pagina, ho un "Progetto" non definito, perché login.js è stato caricato PRIMA di config.js.

Come posso forzare il caricamento di config.js all'inizio, indipendentemente da cosa?

Nota: Ho visto order.js come plug-in per RequireJS ma apparentemente non è supportato poiché la v2, sostituita da shim.

Grazie per il vostro aiuto!

Answer 1

Non è necessario preoccuparsi dell'ordine di caricamento se si definiscono i file js come moduli AMD. (Oppure è possibile utilizzare la configurazione shim se non è possibile modificare config.js e login.js per chiamare define).

config.js dovrebbe essere simile a questo:

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) 

}); 

Anche in questo caso, lo spessore di configurazione dovrebbero essere utilizzati solo se chiamate define() all'interno dei moduli non è un'opzione.

Answer 2

Ranolarsi in un problema simile oggi - abbiamo dati bootstrap che vogliamo essere sicuri che siano caricati prima di qualsiasi altra cosa, e che il modulo che espone tali dati sia impostato prima di valutare qualsiasi altro modulo.

La soluzione più semplice che ho trovato per imporre ordine di caricamento è semplicemente richiedono un modulo di essere caricato prima di proseguire con l'inizializzazione app:

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

Answer 3

C'è una possibile soluzione per costruire una coda per i moduli da caricare. In questo caso tutti i moduli verranno caricati uno alla volta nell'ordine esatto:

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