問題タブ [almond]

私たちは開発中に RequireJS と AMD を愛用しています。モジュールを編集し、ブラウザーでリロードを押して、すぐに結果を確認できます。しかし、本番環境でのデプロイのためにモジュールを 1 つのファイルに連結するときが来たら、AMD ローダーがまだ存在している必要があるようです。そのローダーが RequireJS 自体であろうと、その小さなパートナーである「アーモンド」であろうと、ここで説明されています。

http://requirejs.org/docs/faq-optimization.html#wrap

私の混乱は次のとおりです。なぜローダーが必要なのですか? require()モジュール内で呼び出しを行う必要がある非常に異常な状況でない限り、一連の AMD モジュールは、ローダーがまったく存在しなくても連結できるように見えます。最も単純な例は、次のようなモジュールのペアです。

ModA.js:

ModB.js:

これら 2 つのモジュールを考えると、連結子は単純に次のテキストを生成でき、RequireJS または Almond が必要とする追加の帯域幅または計算で運用サーバーまたはブラウザーに負担をかけないように思われます。

生成する連結子を想像します (そして、上記の 2 つのモジュールからのスニペットが挿入された場所を示すために山形引用符 «,» を使用しています):

これは、私が見る限り、AMD のセマンティクスを正しく再現し、不要なグルー JavaScript を最小限に抑えます。そのような連結子はありますか? もしそうでなければ、私がそれを書くべきだと考えるのはばかです — で書かれたシンプルでクリーンなモジュールで構成され、後でコードの非同期フェッチを開始する内部でのdefine()さらなる呼び出しをまったく必要としないコードベースは本当にほとんどないのでしょうか?require()

私が持っている私のgrunt.jsファイルで

実行すると、いくつかの縮小されたファイルgrunt requirejs:distがディレクトリに入力tmp/jsされます-とりわけ、大きな main.js ファイル(すべてが期待どおりにこのファイルにバンドルされているようです)-ただし、このファイルをそのように含めたい場合

その結果、"Uncaught ReferenceError: define is not defined"

require.jsアーモンドを使用する背後にある意図は、最適化されたファイルをロードするためにファイルをロードする必要がないということでした-これを機能させる方法はありますか?

脚注：以前にファイルがコンパイルされたことを除いて、私はすでにこの方法でそれを行うことができましたがmain-built.js、これはもうそうではないようです（更新... -.-）

Googleマップの入手方法とRequireJSの操作方法に関する次の記事を読みました。gmaps.jsただし、プロジェクトをビルドすると、RequireJSがアーモンドと交換されます。上記の記事では、アーモンドはRequireJS非同期プラグインでは機能しないと述べています。非同期プラグインがないと、Googleの依存関係は読み込まれずgmaps.js、エラーがスローされます。

この問題を回避し、RequireJSではなくアーモンドを使用するプロジェクトにGoogleマップコードをロードする方法はありますか？

テンプレートをビューにロードするために、sugar 構文を使用しています。

すべて正常に動作しますが、r.js オプティマイザーを実行するとエラーが発生します

タイトルにあるように、私のインラインrequire呼び出しは、最適化されていないrequirejs実行では機能しますが、gruntとalmondjsでビルドした場合は機能しません。

ファイルの先頭は次のようになります。

後でビジネスロジックに基づいて、別のファイルを要求できるようにしたい

別の構文も試しました。

そして、これはすべて、ビルドされていないrequirejsバージョンを使用して機能します。しかし、うなり声とアーモンドでそれを構築すると、再び失敗します

定義呼び出しでファイルの先頭に配置すれば、アーモンドで正常に動作させることができますが、AMDでは無駄を省くことが望ましいのではないでしょうか。

そのため、yeoman init を使用してプロジェクトを作成し、requirejs を使用しています。requirejs を almondjs に置き換えて、読み込みを高速化したいと考えています。これどうやってするの？

AlmondJS はこちら: https://github.com/jrburke/almond

RequireJS はこちら: http://requirejs.org/

ヨーマン: http://yeoman.io/

Gruntfile.js での require.js の唯一の言及は次のとおりです。

私はこのbuild.jsファイルを持っています:

そして、私の index.html には次のものがあります。

以下を使用してアプリケーションを最適化する場合:

app ディレクトリはすべて dist ディレクトリにコピーされます。この方法は、変更を行う必要がなく、最適化後すぐにプロジェクトをデプロイできるため、非常に便利です。

問題は、私のコードがrequire.jsを使用しているため、オーバーヘッドが発生することです。どうすればアーモンドを統合できますか? 私はまだ app ディレクトリを dist ディレクトリにコピーしますが、最適化呼び出しのたびに index.html を編集したくありません。
アーモンドを統合する方法はありますか？

RequireJS を使用するサイトに複数のページがあり、ほとんどのページには独自の機能があります。それらはすべて、多数の共通モジュール (jQuery、Backbone など) を共有しています。それらにはすべて、独自の独自のモジュールもあります。r.jsを使用してこのコードを最適化する最良の方法は何だろうと思っています。RequireJS と Almond のドキュメントと例のさまざまな部分で提案されている多くの代替案を目にするので、次の可能性のリストを思いつき、どれが最も推奨されるかを尋ねています (または別のより良い方法があるかどうか)。 :

1. Almondを使用して、サイト全体の 1 つの JS ファイルを最適化します。Almondは一度読み込まれ、その後はキャッシュされたままになります。この最も単純なアプローチの欠点は、ユーザーがそのページで必要としないコード (つまり、他のページに固有のモジュール) を各ページにロードすることです。ページごとに、読み込まれる JS が必要以上に大きくなります。
2. 各ページに対して 1 つの JS ファイルを最適化します。これには、共通モジュールとページ固有のモジュールの両方が含まれます。そうすれば、各ページのファイルに Almond を含めることができ、各ページに 1 つの JS ファイルのみを読み込むことができます。これは、サイト全体の単一の JS ファイルよりも大幅に小さくなります。ただし、共通モジュールがブラウザにキャッシュされないという欠点がありますね。ユーザーがアクセスするページごとに、jQuery、Backbone など (共通モジュール) の大部分を再ダウンロードする必要があります。これらのライブラリは、それぞれの固有の単一ページ JS ファイルの大部分を構成するためです。(これはRequireJS マルチページの例 のアプローチのようですが、この例では Almond を使用していません。)
3. 共通モジュール用に 1 つの JS ファイルを最適化し、次に特定のページごとに別の JS ファイルを最適化します。そうすれば、ユーザーは共通モジュールのファイルをキャッシュし、ページ間をブラウジングするときに、ページ固有の小さな JS ファイルをロードするだけで済みます。このオプションの中で、RequireJS 機能を含めるために、2 つの方法で仕上げることができます。Almond をまったく使用せずに、data-main構文または通常のタグを使用して、すべてのページの共通モジュールの前にファイル require.js をロードします。<script>つまり、各ページには、require.js、共通モジュール、およびページ固有のモジュールの 3 つの JS ファイルが含まれます。b. どうやらこの要旨最適化された各ファイルに Almond をプラグインする方法を提案しています ---- そのため、require.js をロードする必要はありませんが、代わりに共通モジュールとページ固有のモジュールの両方に Almond を含めます。そうですか？それはrequire.jsを事前にロードするよりも効率的ですか?

これを実行するための最良の方法について提供できるアドバイスをありがとう。