按照特定的順序加載文件與RequireJs

Question

我是新的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 ($) {}); 

但有些時候，當我加載頁面時，我有一個「Project」未定義，因爲login.js已經加載了BEFORE config.js。

如何強制config.js首先被加載，不管是什麼？

注意：我將orders.js看作RequireJS的一個插件，但它自v2以來顯然不受支持，替換爲shim。

感謝您的幫助！

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

login.js：

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

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

}); 

再次，應該只有當調用define()模塊裏面是不是一種選擇使用墊片的配置。

Answer 2

今天出現了類似的問題 - 我們已經引導了我們想要確保在其他任何東西之前加載的數據，並且在評估任何其他模塊之前設置暴露該數據的模塊。

我發現強制加載順序的最簡單的方法是簡單地需要一個模塊在繼續與應用程序初始化之前加載：

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

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