Carga de archivos en orden específico con RequireJs

Question

Soy nuevo en RequireJS y estoy atascado con la orden de carga.

Tengo una configuración de proyecto global que necesito cargar antes que los módulos ubicados en js/app/*.

Aquí es mi struture:

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

Aquí está el archivo 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 
}; 

Y aquí está mi archivo 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 ($) {}); 

pero a veces , cuando cargo la página, tengo un "Proyecto" indefinido, porque login.js se ha cargado ANTES de config.js.

¿Cómo puedo forzar que Config.js se cargue al principio, no importa qué?

Nota: vi order.js como un complemento para RequireJS pero aparentemente no es compatible desde la versión 2, reemplazado por shim.

Gracias por su ayuda!

Answer 1

No tendrá que preocuparse por el orden de carga si define sus archivos js como módulos AMD. (O puede usar la configuración shim si no puede modificar config.js y login.js para llamar al define).

config.js debería ser algo como esto:

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) 

}); 

Una vez más, config cuña deberían utilizarse únicamente si llama define() dentro de los módulos no es una opción.

Answer 2

Hoy surgió un problema similar: tenemos datos de arranque que queremos asegurarnos de que estén cargados antes que cualquier otra cosa, y que el módulo que expone esos datos esté configurado antes de que se evalúen otros módulos.

La solución más fácil que he encontrado para forzar el orden de carga es simplemente requerir que se carga un módulo antes de continuar con la inicialización de aplicación:

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

Answer 3

Hay una posible solución para construir una cola para módulos que se cargan. En este caso, todos los módulos se cargarán uno por uno en el orden exacto:

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