Require.jsを使ってJavaScriptを管理する

RequireJS
http://requirejs.org/


JavaScriptのライブラリやモジュールが増えてくると、読み込む順番を管理する必要が出てくる。

.
├── module1.js
├── module2.js
├── module3.js
├── lib
│   ├── json2.js
│   ├── pure.js
│   ├── raphael-min.js
│   └── underscore.js
└── utils
    ├── styleUtils.js
    └── stringUtils.js

この様な状態だと、自前のモジュールをロードする前に
その中で使っているユーティリティ系のライブラリをロードしておく必要があり、さらにその中で使っている、外部ライブラリのロードを先にしておく必要があり。。。


require.jsを使うとこのような管理を簡単にする事ができる。

.
├── module1.js
├── module2.js
├── module3.js
├── lib
│   ├── json2.js
│   ├── pure.js
│   ├── raphael-min.js
│   └── underscore.js
│
├── main.js    **
├── require.js *
└── utils
    ├── styleUtils.js
    └── stringUtils.js


require.js本体と、JSファイルを管理するためのファイル(ここではmain.js)を用意する。
ロードしたい順番としては、libディレクトリ内の外部ライブラリ→それらを使いつつ作った自前のユーティリティ→さらにそれを使って作っているメインのJavaScriptファイル等


main.js

require([
  'lib/json2',
  'lib/underscore',
  'lib/pure',
  'lib/raphael-min',
],
function() {
  if(_ && $p && Raphael) {
    console.log('lib ready.');
  }
  require([
    'utils/Utils' ]);
  require.ready(function() {
    if(Util) {
      console.log('Utils ready');
    }
    require([ 'module1', 'module2' ]);
    console.log('DOM ready!');
  });
});


main.jsを作ったら、HTMLで読み込む。

<!-- data-main属性にmain.jsを指定 -->
<script data-main="main" src="js/require.js"></script>

scriptタグを1つ書けば済むので、とても楽です。