【RequireJS】使い方メモ

RequireJSの基本的な使い方をざっくりメモ。
RequireJSはモジュール化したファイルをいい感じに読み込んでくれるJSフレームワークで、機能ごとの管理がしやすくなり、単体テストもしやすくなる。

Get started

まずは、公式サイトからファイルをダウンロード。
requirejs.org

ダウンロードしたファイルをHTMLに読み込む。
require.jsを読み込んだscriptタグにdata-mainを付けてメインで読み込むファイルを指定する。

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

Example

モジュール化するには、以下の様にdefine()を使います。

main.js

define(function() {
    console.log("ok");
});

依存関係のあるモジュールを読み込む場合は、以下の様に第一引数で読み込んで使用する事ができます。

main.js

define([
    'modules/hoge',
    'modules/piyo'
], function(hoge, piyo) {

    hoge();
    piyo.init();

});

Config file

各種オプションを設定ファイルに記述しておくことで、使いやすくなります。
requireというグローバル変数を定義し、そこにオプションを設定しています。

RequireJS CONFIGURATION OPTIONS

require_config.js

var require = {
  baseUrl: 'js',
  paths: {
    hoge: 'aaa/bbb/hoge'
  }
};

HTML側でrequire.jsを読み込み前に設定ファイルを読み込み

index.html

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

main.js内のdefineをrequireに変更

main.js

require([
    'modules/hoge',
    'modules/piyo'
], function(hoge, piyo) {

    hoge();
    piyo.init();

});

コンパイル

RequireJSはHTML内のscriptタグの数は非常に少なく済みますが、実際には使用しているモジュール数分リクエストが飛んでいます。なので納品などの時にはモジュールファイルを一つにまとめてあげましょう。
r.jsというNode製のツールを使います。
r.js README

インストール

npm install -g requirejs

コンパイル

r.js -o name=main out=main-built.js baseUrl=.

コンパイル時の設定をファイルに記述しておくこともできます。

build.js

({
    baseUrl: "src/scripts/",
    name: "main",
    out: "dest/scripts/main.min.js"
})

コンパイル

r.js -o build.js