RequireJSをhtmlで利用してみた
前回 は node.js で RequireJS を利用しました。
次は実際にサイトに組み込む場合はどのように利用するか試してみます。
構成
以下のようなディレクトリ構成で試します。
$ tree
.
├── index.html
└── js
├── lib.js
├── main.js
└── require.js
1 directory, 4 files
js フォルダを作成して、その中に Download RequireJS から RequireJS をダウンロードして設置してください。
以下は RequireJS 2.0.6 の minified 版のダウンロードの例のコマンドです。
$ wget http://requirejs.org/docs/release/2.0.6/minified/require.js
jsの内容
js/lib.js main.js から呼ばれる側です。
define(function() { var context = {}; context['say_hello'] = function() { alert('hello, requirejs.'); }; return context; });
js/main.js 実行する側です。
require(['lib'], function(lib) { lib.say_hello(); });
js/main.js で js/lib.js に記載した関数を呼びます。
define 関数の引数に外に出す変数/関数を記載すれば、外で利用できます。
define の詳しい使い方は RequireJS API Define a Module のページを参考にしてください。
html の内容
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST PAGE.</title> <script data-main="js/main" src="js/require.js"></script> </head> <body> <h1>TEST</h1> </body> </html>
script タグ読み込み時に、 data-main タグに記載された js が読み込まれ処理されます。
script タグの詳細は http://requirejs.org/docs/api.html#packages:RequireJS API Loading Modules from Packages の『project.html will have a script tag like this:』以降を参考にしてください。
