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）并且我已经将JS模块存储在一个新的不同设计文件夹中。在关闭</body>之后定位编译的JS，以保证JS始终位于HTML之后的底部。

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

解决这个问题已经准备好了＃34;执行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

示例

以下是我们如何使我们的lib之一自包含的示例：

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

基本上，在源代码级别中，lib＆＃34;就像往常一样需要其他模块。但是在编译之后，生成的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

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

2 个答案: