RequireJS入門

RequireJSを入手§ 1
RequireJSを追加§ 2
最適化§ 3
例§ 4

注意: jQueryを使用している場合は、jQueryのチュートリアルを参照してください。

RequireJSを入手 § 1

ダウンロードページにアクセスして、ファイルを入手してください。

RequireJSを追加 § 2

注意: jQuery固有のアドバイスについては、jQuery統合ページを参照してください。

この設定では、すべてのJavaScriptファイルをプロジェクトの「scripts」ディレクトリに保持することを前提としています。たとえば、project.htmlページといくつかのスクリプトを持つプロジェクトがある場合、ディレクトリレイアウトは次のようになります。

project-directory/
- project.html
- scripts/
  - main.js
  - helper/
    - util.js

require.jsをscriptsディレクトリに追加すると、次のようになります。

project-directory/
- project.html
- scripts/
  - main.js
  - require.js
  - helper/
    - util.js

最適化ツールを最大限に活用するには、すべてのインラインスクリプトをHTMLから削除し、次のようにrequirejs呼び出しでrequire.jsのみを参照してスクリプトをロードすることをお勧めします。

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

require.jsスクリプトのロードによるレンダリングのブロックを避けたい場合は、スクリプトタグを<body>セクションの最後に配置することもできます。対応しているブラウザーでは、スクリプトタグにasync属性を追加することもできます。

main.js内では、requirejs()を使用して、実行する必要がある他のスクリプトをロードできます。data-mainスクリプトは非同期的にロードされるため、これにより単一のエントリポイントが確保されます。

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

これにより、helper/util.jsスクリプトがロードされます。RequireJSを最大限に活用するには、APIドキュメントを参照して、モジュールの定義と使用方法について詳細を学んでください。

最適化 § 3

開発が完了し、エンドユーザー向けにコードをデプロイする場合は、オプティマイザーを使用して、JavaScriptファイルを結合してminifyすることができます。上記の例では、main.jsとhelper/util.jsを1つのファイルに結合し、結果をminifyすることができます。

例 § 4

RequireJSを試すためのスタータープロジェクトが必要な場合は、次のオプションがあります。

JavaScriptモジュールローダー

RequireJS入門

RequireJSを入手 § 1

RequireJSを追加 § 2

最適化 § 3

例 § 4