Использование require.js для клиентских зависимостей в Adobe CQ5

Мне было интересно, есть ли у кого-нибудь опыт использования require.js с платформой Adobe CQ5. Я пишу одностраничное приложение Chaplin.js (базовое), которое будет интегрировано в остальную часть сайта на основе CQ5, над которым мы работаем. Chaplin требует использования модульной системы, такой как AMD/Common.js, и я хочу убедиться, что мой скомпилированный файл javascript можно будет использовать в клиентских библиотеках CQ5. Это так же просто, как добавить require.js в качестве зависимости в clientlibs перед загрузкой в ​​мои модули javascript? Кто-то проницательность, у кого есть опыт в этом, будет принята с благодарностью.


javascript requirejs aem backbone.js chaplinjs
person user1599089    schedule 19.01.2014    source источник
comment
Я считаю, что require и clientlibs — это два инструмента для решения одной и той же проблемы — require.js прекрасно работает, если вы вручную добавите его в свой шаблон. Вы всегда можете отказаться от клиентских библиотек и просто использовать require, как на любом другом сайте?   -  person anotherdave    schedule 20.01.2014
comment
Я с @anotherdave. В прошлом клиентские библиотеки содержали ошибки, особенно в отношении минификации. Я предлагаю использовать клиентскую технологию, такую ​​​​как RequireJS, для решения проблем клиента.   -  person Elise Chant    schedule 21.04.2014

Ответы (2)


arrow_upward
2
arrow_downward

Я реализовал это как решение для лучшей организации всех модулей, таких как:

//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 было очень большим, и команда тоже, но, говоря простым языком, это был лучший способ, который я обнаружил до сих пор.

person Fernando Cea    schedule 29.04.2014

arrow_upward
1
arrow_downward

Идея

Я думаю, вы можете скомпилировать свой Chaplin.js с одним из AMDShims, чтобы сделать его самодостаточным, обернуть все необходимые зависимости внутри области действия функции, выставить точку входа как глобальную переменную (что является плохой практикой, но CQ делает все это time...), а затем используйте скомпилированный .js внутри обычной клиентской библиотеки:

Прокладки AMD

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

Пример

Вот пример того, как мы делаем одну из наших библиотек автономной:

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

Альтернативный

В качестве альтернативы, вместо того, чтобы компилировать каждую библиотеку, которую вы используете, чтобы она была независимой/автономной, в нашем проекте мы просто используем amdshim вместо реального require.js. поэтому на уровне компонента cq вы можете вызывать функцию require() как обычно:

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

Прокладка amd не будет отправлять 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

person Norman Xu    schedule 30.04.2014