web-dev-qa-db-ja.com

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

しかし、ページをロードすると、login.jsがconfig.jsの前にロードされているため、「プロジェクト」が未定義である場合があります。

どうすればconfig.jsを最初に強制的にロードできますか？

注：order.jsはReq​​uireJSのプラグインとして見ましたが、v2以降はサポートされていないようで、shimに置き換えられました。

ご協力いただきありがとうございます！

requirejs
22
Cyril N.

JsファイルをAMDモジュールとして定義する場合、ロードの順序を気にする必要はありません。 （または、_config.js_と_login.js_を変更してdefineを呼び出せない場合は、shim設定を使用できます）。

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)

});
_

繰り返しますが、shim configは、モジュール内でdefine()を呼び出すことがオプションでない場合にのみ使用してください。

15
ekuusela

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

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

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

ロードするモジュールのキューを構築するための可能な解決策があります。この場合、すべてのモジュールが正確な順序で1つずつ読み込まれます。

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