2012-07-20 8 views
21

저는 RequireJS를 처음 사용하고로드 순서가 고착되었습니다.RequireJs로 특정 순서로 파일로드

js/app/*에있는 모듈보다 먼저로드해야하는 전역 프로젝트 구성이 있습니다.

다음
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 ($) {}); 

그러나 몇 번 여기

내 struture입니다 , 페이지를로드 할 때 login.js가 config.js 전에로드되었으므로 "프로젝트"가 정의되지 않았습니다.

config.js를 처음로드 할 때 강제로 어떻게 할 수 있습니까?

참고 : Order.js를 RequireJS의 플러그인으로 보았지만 v2가 shim으로 바뀌면서 지원되지 않는 것 같습니다.

도움 주셔서 감사합니다.

답변

14

js 파일을 AMD 모듈로 정의하면로드 순서에 대해 걱정할 필요가 없습니다. (config.jslogin.js을 수정하여 define을 호출 할 수없는 경우 shim config를 사용할 수 있습니다. 다음과 비슷한 모습이 될 것입니다

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()를 호출하면 옵션이없는 경우

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

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

}); 

는 다시 심 설정에만 사용되어야한다.

25

오늘날 비슷한 문제가 있습니다. 다른 어떤 모듈보다 먼저로드되는 데이터를 부트 스트랩하고 다른 모듈을 평가하기 전에 해당 데이터를 노출하는 모듈을 설정해야합니다.

내가로드 순서를 강제로 발견 가장 쉬운 해결책은 모듈이 응용 프로그램 초기화와 함께 계속하기 전에로드 할 필요하는 것입니다

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

동의합니다. 개발 과정에서 일시적으로 달성 할 필요가 있었고 충분히 좋았습니다! –

+0

위의 코드를 _requirejs-config.js_에 넣어도 순서대로로드 할 수 있습니다. – Sunry

20

모듈이로드 될 때까지 큐를 구축 할 수있는 가능한 솔루션이있다. 이 경우 모든 모듈은 정확한 순서대로 하나씩로드됩니다.

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

의미가 있습니다. 감사. 중첩 된 모듈에 따라 모듈이 작동하는지 알고 싶습니까? – Sushruth

+0

r.js 옵티마이 저가 app/home이 최종/축소 된 concat 파일에서 app/home 앞에 앱의 소스 코드가 표시된다는 것을 의미하지 않는다는 이유만으로 주문에 대한 특정주의를 기울이지 않을 것입니다 ... 유일한 보장은 콜백 전에 모두로드된다는 것입니다. – Patrick

관련 문제