問題
require.jsのロードは以下のようにシンプルに書けます。
SnippetLoadRequireJsSimple.html
<script src="js/require.js" data-main="js/foo"></script>
js/require.jsに対してjs/foo.jsを設定ファイルとして指定しているわけですが、
この書き方をすると、複数の設定ファイルを読み込むことができません。
例えばhtml内に別のhtmlをロードする必要があったとして、それぞれのHTMLに上記のようなロード処理があると、後に読まれたほうの記述が無視されます(require.jsが重複ロードされることになるため)。
対策
require.jsと設定ファイルを別の<script>タグでロードするようにすることで、複数の設定ファイルをロードできます。
SnippetLoadRequireJsIndividual.html
<!-- ロードする側のhtml -->
<script src="js/require.js"></script>
<script src="js/foo.js"></script>
<!-- ロードされる側のhtml -->
<script src="js/require.js"></script>
<script src="js/bar.js"></script>