RequireJSは、javascriptファイルを非同期に(つまりブロックせずに)ロードし、複数のjavascriptファイル間の依存関係を管理するために使用される非同期モジュール(AMD)APIの実装です。また、開発者が論理的に別個のコードを維持できるようにしながら、展開用のスクリプトファイルを結合および最小化するための最適化ツールも含まれています。
次の例は、RequireJSの基本的なインストールとセットアップを示します。
index.html
という名前の新しいHTMLファイルを作成し、次の内容を貼り付けます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
</body>
scripts/say.js
新しいJSファイルを作成し、次の内容を貼り付けます:
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
プロジェクトの構造は次のようになります。
- project
- index.html
- scripts
- say.js
ブラウザでindex.html
ファイルを開くと、「Hello World」で警告が表示されます。
require.jsスクリプトファイルをロードします。
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
say
モジュールをscripts
フォルダから非同期でロードします。 (モジュールを参照するときに.js
拡張子は必要ありません。)返されたモジュールはhello()
が呼び出された関数に渡されます。
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
say
モジュールは、1つの関数hello
定義された単一のオブジェクトを返します。
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
次の例では、 define()
関数を使用して複数の依存関係をデモンストレーションすることにより、 Hello World
拡張していdefine()
。
index.html
という名前の新しいHTMLファイルを作成し、次の内容を貼り付けます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
</body>
scripts/say.js
新しいJSファイルを作成し、次の内容を貼り付けます:
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
scripts/translations.js
新しいJSファイルを作成し、次のコンテンツを貼り付けます。
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
プロジェクトの構造は次のようになります。
- project
- index.html
- scripts
- say.js
- translations.js
ブラウザでindex.html
ファイルを開くと、コンソールから出力されます。
Hello World
Hola Mundo
Bonjour Le Monde
require.jsスクリプトファイルをロードします。
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
say
モジュールをscripts
フォルダから非同期でロードします。 (モジュールを参照するときに.js
拡張子は必要ありません。)返されたモジュールはhello()
が呼び出された関数に渡されます。
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
say
モジュールは、1つの機能を持つ単一のオブジェクトを返すhello
定義されたが、この場合には、我々は、依存関係(定義されているscripts/translations
)、私たちはそこから翻訳を引っ張ってきます。
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
translations
モジュールは、単にさまざまな単語の翻訳を含むオブジェクトを返します。
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
すべてのライブラリがAMDとRequireJSのdefine()
関数と互換性のある方法で定義されているわけではありません。著者は、これらの依存関係を設定するためのshim
ディレクティブをshim
ことでこれに対処しました。
1つの例は、jQuery UI Layout Pluginを使用することです。そのプラグインはjQueryに依存します。次のように設定することができます:
requirejs.config({
paths: {
'jquery': '../path/to/jquery.min',
'jquery.layout': '../path/to/jquery.layout.min'
},
shim: {
'jquery.layout': {
deps: ['jquery']
}
}
});
そして、次のようなレイアウトモジュールでそれを使用します:
define(['jquery', 'jquery.layout'], function ($, layout) {
$('body').layout();
});
RequireJSでは、 <script>
タグ内のdata-main
属性を使用することで、アプリケーションへの単一のエントリポイントが可能です。
<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
ロード時に、RequireJSはdata-main
属性を探し、主スクリプトタグをasync
属性が設定されたDOMに挿入します。このファイルは、アプリケーションを起動する前に任意の構成を実行する必要があります。
例えば:
// contents of scripts/main.js
require.config({
waitSeconds: 10,
paths: {
jquery: 'libs/jquery-1.4.2.min'
}
});
requirejs(["jquery", "libs/say"], function($, say) {
var $body = $('body');
$body.append( $('<p/>').text(say.hello("english")) );
$body.append( $('<p/>').text(say.hello("spanish")) );
$body.append( $('<p/>').text(say.hello("french")) );
});