1

我想知道是否有人有在 Adob​​e CQ5 平台上使用 require.js 的经验。我正在编写一个 Chaplin.js（基于骨干网）单页应用程序，它将集成到我们正在开发的其他基于 CQ5 的站点中。卓别林需要使用像 AMD/Common.js 这样的模块系统，我想确保我编译的 javascript 文件可以在 CQ5 的客户端库中使用。在加载到我的 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 定位在 close 之后</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

理念

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

AMD 垫片

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

例子

这是我们如何使我们的库之一自包含的示例：

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

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

在此处查看编译文件：https ://github.com/normanzb/chuanr/blob/master/Chuar.js

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

选择

或者，不是将您使用的每个库都编译为独立/自包含的，我们在项目中所做的只是在 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

于 2014-04-30T11:22:11.663 回答