Web, Dev, Etc

RequireJSでこんなコードを書いてる。

page.html

<script>
require(["libA"], function(){
  libA.foo();
});
</script>

libA.js

// libB, libC, libD,...など不特定多数多数のライブラリに依存する
require(["libB", "libC", "libD"], function(){
  libA = {
    foo: function(){
      libB.something();
    }
  };
});

libB.js, libC.js, libD.js, libE.js…

libB = {
  // blah blah blah...
};

だがこのコードはほとんどうまく動くことがない（たまに上手くいく）。なぜなら、libAのrequireコールバックが呼ばれたときにまだlibB以降は使えない可能性が高いからだ。

普通ならHTML内のrequireで全部のライブラリを列挙すれば安全にロードできるのだが、ここではlibB以降のライブラリは場合によって必要なものと数が変わるからHTML内では列挙できない。

そこで、libB以降のライブラリの読み込みを保証してからHTML側の処理に入りたい。
どういうやり方が賢いだろうか。

こんな風に書けたらいいな

page.html

<script>
require(["libA"], function(){
  function(){
    libA.foo();
  }
});

libA.js

libA = {};
require(["libB", "libC", "libD"], function(){
  libA = {
    // blah blah blah...
  };
  loaded("libA");
});

要はファイルが読み込まれただけじゃなく、初期化が完了して使える状態にあることをローダーに対して伝えたいわけだな。ちょっと実装してみる。