23

私は 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 ($) {});

しかし、時々、ページをロードすると、login.js が config.js の前にロードされているため、「プロジェクト」が定義されていません。

何があっても、最初に config.js を強制的にロードするにはどうすればよいですか?

注: RequireJS のプラグインとして order.js を見ましたが、v2 以降ではサポートされていないようで、shim.

4

3 に答える 3

26

今日も同様の問題が発生しました。ブートストラップされたデータが他の何よりも先にロードされ、そのデータを公開するモジュールが他のモジュールが評価される前にセットアップされることを確認します。

ロード順序を強制するために私が見つけた最も簡単な解決策は、アプリの初期化を続行する前にモジュールのロードを要求することです。

require(["bootstrapped-data-setup", "some-other-init-code"], function(){
    require(["main-app-initializer"]);
});
于 2013-05-03T15:42:09.993 に答える
15

js ファイルを AMD モジュールとして定義すれば、読み込み順序を気にする必要はありません。config.js(または、 を変更してlogin.jsを呼び出すことができない場合は、shim 構成を使用できます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()繰り返しになりますが、シム構成は、モジュール内での呼び出しがオプションでない場合にのみ使用する必要があります。

于 2012-08-28T17:23:50.020 に答える