1

Adobe CQ5 プラットフォームで require.js を使用した経験のある人がいるかどうか疑問に思っていました。現在取り組んでいる CQ5 ベースのサイトの残りの部分に統合される Chaplin.js (バックボーン ベース) のシングル ページ アプリを作成しています。Chaplin では AMD/Common.js などのモジュール システムを使用する必要があり、コンパイルした JavaScript ファイルが CQ5 の clientlibs 内で使用できるようにしたいと考えています。私のjavascriptモジュールにロードする前に、clientlibsに依存関係としてrequire.jsを追加するのと同じくらい簡単ですか? これを行った経験のある人の洞察は大歓迎です。

4

2 に答える 2

2

私はこれを、次のようなすべてのモジュールをより良い方法で整理するソリューションとして実装しました。

//public/js/modules/myModule.js
define('myModule',[ /* dependencies */] ,function( /* stuff here */ ))

および次のようなコンポーネントで：

<% //components/component.jsp %>
<div>
  <!-- stuff here -->
</div>

コンポーネントJS:

//components/component/clientlibs/js/component.js
require(['modules/myModule']);

最後に、require ( config.js) を構成し、JS モジュールを新しい別のデザイン フォルダーに保存しました。コンパイルされた JS を閉じた後に</body>配置して、JS が常に HTML の後の一番下に配置されるようにします。

<!-- page/body.jsp -->
...
  <cq:includeClientLib js="specialclientlibs.footer"/>
</body>

これにより、JS が実行される前にすべてのコンテンツを「準備」するという問題が解決されます。clienlibs コンパイル ツール用に管理されているこの非同期処理で解決すべきいくつかの問題がありました。本番環境では問題は異なりましたが、開発環境では、CQ が JS をコンパイルする順序によって、 JS。JS とチームの数が非常に多かったため、問題は説明よりも少し複雑でしたが、簡単に言えば、これまでに発見した中で最良の方法でした..

于 2014-04-29T15:40:28.867 に答える
1

アイデア

AMDShims の 1 つを使用して Chaplin.js をコンパイルして自己完結型にし、必要なすべての依存関係を関数スコープ内にラップし、エントリ ポイントをグローバル変数として公開することができると思います (これは悪い習慣ですが、CQ はすべてを実行します)。 time...) そして、通常の clientlib 内でコンパイルされた .js を使用します。

AMD シム

https://github.com/jrburke/requirejs/wiki/AMD-API-Shims

例

以下は、ライブラリの 1 つを自己完結型にする方法の例です。

https://github.com/normanzb/chuanr/blob/master/gruntfile.js

基本的に、ソースコードレベルでは、ライブラリは通常どおり他のモジュールを「必要」とします。ただし、コンパイル後、生成された chuanr.js ファイルには必要なものがすべて含まれており、軽量の AMD 互換実装の一部がラップされています。

ここでコンパイルされたファイルをチェックしてください: https://github.com/normanzb/chuanr/blob/master/Chuanr.js

ソースコード: https://github.com/normanzb/chuanr/tree/master/src

別

別の方法として、使用しているすべてのライブラリを独立/自己完結型にコンパイルするのではなく、プロジェクトで実際の require.js の代わりに以下の amdshim を使用するだけです。したがって、cq コンポーネント レベルでは、通常どおり require() 関数を呼び出すことができます。

require(['foo/bar'], function(){});

amd shim は http リクエストをすぐにモジュールに送信するのではなく、他の誰かがモジュールをロードするまで待機します。

次に、ページの下部で、すべての依存関係を収集し、要件をサーバー側ハンドラー (scriptmananger) に送信して動的マージを行います (内部で r.js を呼び出します)。

var paths = [];
for (var path in amdShim.waiting){
     paths.push(path);
}
document.write('/scriptmananger?' + paths.join(','));

使用している amdShim: https://github.com/normanzb/amdshim/tree/exp/defer

于 2014-04-30T11:22:11.663 に答える