在Adobe CQ5中使用require.js作为客户端依赖项

Question

我想知道是否有人在使用Adobe CQ5平台的require.js时有经验。 我正在编写一个Chaplin.js（基于骨干的）单页应用程序，该应用程序将集成到我们正在开发的基于CQ5的其余站点中。 卓别林需要使用像AMD / Common.js这样的模块系统，我想确保我编译的javascript文件可以在CQ5的clientlibs中使用。 是否像在我的javascript模块中加载之前添加require.js作为clientlibs中的依赖一样简单？ 有经验的人会非常感激。

Answer 1

我已经将此实现为一种更好地组织所有模块的解决方案，例如：

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

在以下组件中：

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

componentJS：

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

最后我配置了require（ config.js ）并将JSs模块存储在一个新的不同设计文件夹中。 在关闭</body>之后定位编译的JS，以保证JS始终位于HTML之后的底部。

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

解决这个问题，在执行JS之前已经“准备好”了所有内容。 我有一些问题要解决这个为clienlibs编译工具管理的异步内容，在生产中问题是不同的，但是，在开发中，CQ编译JS的顺序使我产生了一些缺乏的顺序JS。 这个问题确实比解释要复杂得多，因为JS的数量真的很大，团队也是如此，但简单来说，这是我迄今为止发现的最好方式。

Answer 2

想法

我认为您可以使用其中一个AMDShims编译Chaplin.js以使其自包含，在函数范围内包装它所需的每个依赖项，将入口点作为全局变量公开（这是一个不好的做法，但CQ完成所有操作时间...）然后在普通的clientlib中使用compiled.js：

AMD Shims

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

例

以下是我们如何使我们的libs自包含的示例：

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

基本上，在源代码级别，lib“通常需要”其他模块。 但是在编译之后，生成的chuanr.js文件包含了它所需要的一切，甚至包含了一块轻量级AMD兼容的实现。

在这里查看编译文件： https ： //github.com/normanzb/chuanr/blob/master/Chuanr.js

和源代码： https ： //github.com/normanzb/chuanr/tree/master/src

替代

或者不是编译你使用的每个lib独立/自包含，我们在项目中所做的只是使用amdshim而不是真正的require.js。 所以在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