Require.js使う時にhtmlにどう書くか

地味に書き方が複数あるっぽかったので。

読み込み方のパターン

以下、すべて同じです。

これと、

<script src="/script/vendor/require.js"></script>
<script src="/script/app/require_config.js"></script>
<script src="/script/app/main.js"></script>

これと、

<script src="/script/vendor/require.js" data-main="main"></script>
<script src="/script/app/requireConfig.js"></script>

これ。

<script src="/script/app/requireConfig.js"></script>
<script src="/script/vendor/require.js" data-main="main"></script>

違いがあるとすればconfigファイルの記載が違う。
今回の例でいうと、

require_config.js

// require.js本体は先に読んでるので、configメソッドで設定する
require.config({
  baseUrl: '/script/app',
  paths: {
    templates:  './tmpl/templates',
    underscore: '../vendor/underscore',
    jquery:     '../vendor/jquery',
    backbone:   '../vendor/backbone'
  },
  shim: {
    templates: {
      exports: 'JST'
    },
    jquery: {
      exports: ['$', 'jQuery']
    },
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

requireConfig.js

// 本体より先なので、require変数を定義する
var require = {
  baseUrl: '/script/app',
  paths: {
    templates:  './tmpl/templates',
    underscore: '../vendor/underscore',
    jquery:     '../vendor/jquery',
    backbone:   '../vendor/backbone'
  },
  shim: {
    templates: {
      exports: 'JST'
    },
    jquery: {
      exports: ['$', 'jQuery']
    },
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
};

最終的には

まあ、どれもこれも最適化するので。

1ファイルにするなら、

<script src="/script/build/all.min.js"></script>

ってなるし、開発中でも、

<script src="/script/vendor/require.js" data-main="main"></script>

みたいにもできる。

ようは、読込順がちゃんとしてればファイルは1つでも分かれてても良い。