如何为每个组件生成clientlib并放置到ui.apps下对应组件目录

核心思路 #

把ClientLibraryFolder（简称clientlibs）直接放在对应组件的目录下，通过配置.clientlibs文件定义clientlib的元数据，再在组件模板中引用该clientlib即可。

具体步骤 #

1. 在组件目录下创建clientlib结构

假设你的组件路径为/apps/my-project/components/content/hero-banner，在该目录下新建clientlib子目录，结构如下：

hero-banner/
├── clientlib/
│   ├── css/
│   │   └── hero-styles.css
│   ├── js/
│   │   └── hero-script.js
│   ├── css.txt
│   ├── js.txt
│   └── .clientlibs
├── hero-banner.html
├── hero-banner.xml
└── ...（组件其他文件）

• css.txt：列出要打包的CSS文件路径（相对clientlib目录），比如css/hero-styles.css
• js.txt：同理，列出要打包的JS文件路径，比如js/hero-script.js

2. 配置.clientlibs元数据文件

这是实现组件级clientlib的关键文件，采用JSON格式，定义clientlib的分类、依赖、压缩规则等。示例内容：

{
  "categories": [
    "my-project.hero-banner"
  ],
  "dependencies": [
    "core.wcm.components.commons",
    "granite.jquery"
  ],
  "embed": [],
  "cssProcessor": ["default:none", "min:none"],
  "jsProcessor": ["default:none", "min:none"],
  "allowProxy": true,
  "type": "cq:ClientLibraryFolder"
}

• categories：唯一标识该clientlib的分类名，建议用项目+组件名的命名规则避免冲突
• dependencies：该clientlib依赖的其他clientlib分类
• cssProcessor/jsProcessor：调试阶段设为none，生产环境可改为min:yui或min:gcc开启压缩
• allowProxy：允许通过代理访问clientlib资源

3. 在组件HTL模板中引用clientlib

在组件的HTML模板（比如hero-banner.html）中，使用AEM官方的clientlib模板加载对应的CSS和JS：

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>

<!-- 加载当前组件的CSS -->
<sly data-sly-call="${clientlib.css @ categories='my-project.hero-banner'}"/>

<!-- 加载当前组件的JS -->
<sly data-sly-call="${clientlib.js @ categories='my-project.hero-banner'}"/>

<!-- 组件其他HTML内容 -->
<div class="hero-banner">
  ...
</div>

4. 确认Maven打包配置

确保ui.apps模块的pom.xml没有排除组件目录下的clientlib文件，默认情况下Maven会打包/apps下的所有文件，无需额外配置。如果有自定义的排除规则，需调整为包含clientlib目录。

注意事项 #

• 同一分类的clientlib会被AEM自动合并，即使组件有多个实例也只会加载一次
• 分类命名要全局唯一，避免和其他项目或AEM核心组件的clientlib分类冲突
• 生产环境记得开启压缩处理器，减少资源体积
• 如果组件需要共享样式/脚本，可将公共部分提取到项目级的clientlib，再通过dependencies引入

内容的提问来源于stack exchange，提问作者Asha Chamy