Загружать файлы в определенном порядке с помощью RequireJs

Я новичок в RequireJS, и я придерживаюсь порядка загрузки.

У меня есть глобальная конфигурация проекта, которую нужно загрузить перед модулями, расположенными в js/app/*.

Здесь моя struture:

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

Здесь файл 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
};

И вот мой файл 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 ($) {});

Но иногда, когда я загружаю страницу, у меня есть "Проект" undefined, потому что login.js загружен ПЕРЕД конфигурацией .js.

Как я могу принудительно загружать config.js, независимо от того, что?

Примечание. Я видел order.js в качестве плагина для RequireJS, но он, видимо, не поддерживается с v2, заменен на shim.

Спасибо за вашу помощь!

Ответы

Ответ 1

Вам не придется беспокоиться о порядке загрузки, если вы определяете свои js файлы как модули AMD. (Или вы можете использовать конфигурацию прокладки, если вы не можете изменить config.js и login.js для вызова define).

config.js должен выглядеть примерно так:

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

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

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

});

Опять же, конфигурацию shim следует использовать, только если вызов define() внутри модулей не является опцией.

Ответ 2

Напомним, что подобная проблема сегодня - у нас есть загруженные данные, которые мы хотим убедиться, что они загружены раньше всего, и что модуль, подвергая эти данные, настроен до того, как будут оценены другие модули.

Самое легкое решение, которое я нашел, чтобы заставить порядок загрузки - просто потребовать загрузки модуля, прежде чем продолжить с инициализацией приложения:

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

Ответ 3

Существует возможное решение для построения очереди для модулей, подлежащих загрузке. В этом случае все модули будут загружаться один за другим в точном порядке:

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