web-dev-qa-db-ja.com

RequireJS：複数のmain.js？

私はrequireJSを使用してシングルページアプリを構築してきましたが、これまでのところそれが大好きです。私はメインアプリの外でサイトの他の部分を開発することになりましたが、これにrequireJSをどのように使用するか（または使用するかどうか）はよくわかりません。

私のメインアプリでは、すべてがこのスクリプトタグによってトリガーされます。

<script data-main='/scripts/main' src='/scripts/libs/require.js'>

現在、独自のフロントエンドスクリプトを備えたホームページを開発しています。これらすべてのスクリプトを1つのmain.jsパッケージにバンドルするサイトを公開する場合は、オプティマイザーを使用します。私のサイトの残りの部分がこれに当てはまる場所を理解するのに苦労しています。

私のアプリがjQueryに依存していて、アプリの最適化されたバージョンにバンドルされているとしましょう。ホームページでjQueryを使用したい場合はどうすればよいですか？ jQueryモジュールにアクセスするためだけに、アプリのmain.jsをロードしたくありません。 そうそう...少し混乱しています！


私はこのようなサイト構造を想像しています：

/scripts
  - app-main.js //(includes all module dependencies after optimzation)
  - home-main.js //(includes all module dependencies after optimzation)

アプリ：

<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>

ホームページ：

<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>


質問

  1. RequireJSを使用してサイトのさまざまな部分を開発するにはどうすればよいですか？
  2. 複数のmain.jsファイルを用意することをお勧めしますか？
  3. 異なるmain.jsファイルでjQueryポスト最適化などの共通モジュールを共有するにはどうすればよいですか？
javascriptmodulerequirejs
31
wilsonpage

したがって、require.jsは、モジュール性とクリーンな名前空間を可能にするために、常にすべてのページで使用する必要があります。各「アプリ」には独自のmain.jsスクリプトが必要だと思います。サイトを最適化する場合、r.jsを使用すると、jQueryに対して常に実行する必要があるモジュールをコンパイルから除外できます。

そうすれば、require.jsは常にjquery.jsをオンザフライでロードし、ほとんどの場合キャッシュからロードします。アプリとホームページの間でキャッシュされる可能性のある他のモジュールの検索は、ユーザーのフローやその他の要因に応じて、独自の裁量で行う必要があります。

アプリとマーケティングサイトの2つのプロジェクトがあるようです。それらはかなりの範囲で分離されるべきであり、独自のmain.jsを含む独自の「js」フォルダーを持つべきだと私は信じています。

0
Thomas Davis

Requirejsチームには、github上のマルチページアプリケーションのサンプルがいくつかあります。ご覧ください： https://github.com/requirejs/example-multipage

基本的に、次の構造になります。

  • page1.html：アプリのページ1。

  • page2.html：アプリの2ページ目。

  • js app：アプリ固有のモジュールを保存するディレクトリ。

  • lib：jQueryなどのサードパーティモジュールを保持するディレクトリ。

  • common.js：requirejs構成が含まれており、共通モジュールのセットのビルドターゲットになります。

  • page1.js：page1.htmlのデータメインに使用されます。共通モジュールをロードしてから、1ページのメインモジュールであるapp/main1をロードします。

  • page2.js：page2.htmlのデータメインに使用されます。共通モジュールをロードしてから、2ページのメインモジュールであるapp/main2をロードします。

38
PutzKipa