data - Cargar archivos en un orden específico con RequireJs

require() javascript

Question

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

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

Aquí está 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 algunas veces, cuando carga la página, tengo un "Proyecto" que no está definido, porque login.js se ha cargado ANTES de config.js.

¿Cómo puedo forzar que config.js se cargue al principio, sin importar qué?

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

¡Gracias por tu ayuda!

Answer 1

Existe una posible solución para crear una cola para que se carguen los módulos. 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();
});

Answer 2

Hoy nos encontramos con un problema similar: tenemos datos de arranque que queremos asegurarnos de que se carguen antes que nada, y que el módulo que expone esos datos se configure antes de evaluar otros módulos.

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

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

Answer 3

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

config.js debería verse 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)

});

Nuevamente, shim config solo debe usarse si llamar a define() dentro de los módulos no es una opción.