RequireJS-モジュールの読み込み

モジュールは、jsファイルの* define（）*関数を使用してロードされます。モジュールをhtmlファイルにロードするための構文は以下のとおりです-

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

上記のスクリプトタグでは、_main_を使用して、_require.js_に関連するパッケージをセットアップします。この例では、ソースパッケージは_team1_および_team2_です-

例

次の例は、RequireJSでモジュールを定義およびロードする方法を説明しています。 _indexl_という名前のhtmlファイルを作成し、その中に次のコードを配置します。

<!DOCTYPE html>
<html>
   <head>
      <script data-main = "main" src = "require.js"></script>
   </head>

   <body>
      <h2>RequireJS Example</h2>
   </body>
</html>

_main.js_という名前の js ファイルを作成し、次のコードをその中に配置します。

define(function (require) {
   var team1 = require("./team1");
   var team2 = require("./team2");

   alert("Welcome to Tutorialpoint");
   document.write("<h4>Hyderabad Team: </h4>" + "<br>" + " Team:"+team1.team +"<br>
      "+"Captain:" +team1.captain +"<br>");

   document.write("<h4>Bangalore Team: </h4>" + "<br>" + " Team:"+team2.team +"<br>
      "+"Captain:"+team2.captain +"<br>");
});

_team1.js_および_team2.js_という名前でさらに2つのjsファイルを作成し、それぞれ次のコードを配置します。

*team1* の場合-

define({
   team: "Sunrisers Hyderabad",
   captain : " David Warner"
});

*team2* の場合-

define({
   team: "RCB",
   captain : "Virat Kohli"
});

出力

ブラウザでHTMLファイルを開きます。次のスクリーンショットのように出力が表示されます-

RequireJSモジュールの読み込み

次に、「OK」ボタンをクリックして、次のスクリーンショットのようにモジュールから別の出力を取得します-

RequireJSモジュールの読み込み

Requirejs-modules-loading

RequireJS-モジュールの読み込み

例

出力