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