查看全栈 AEM 项目的 'ui.frontend' 模块 aem-full-stack-ui-frontent

Last update: Wed Sep 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager as a Cloud Service

创建对象：

中级
开发人员
管理员

在本章中，我们将查看全栈 AEM 项目的前端工件的开发、部署和交付，并重点关注 WKND Sites 项目 的 ui.frontend 模块。

目标 objective

了解 AEM 全栈项目中前端工件的构建和部署流程
查看 AEM 全栈项目的 ui.frontend 模块的 webpack 配置
AEM 客户端库（也称为 clientlibs）生成过程

AEM 全栈和快速网站创建项目的前端部署流程

IMPORTANT

此视频说明并演示了 全栈和快速网站创建 两个项目的前端流程，概述了前端资源构建、部署和交付模型的细微差别。

https://video.tv.adobe.com/v/3409344?quality=12&learn=on

先决条件 prerequisites

克隆 AEM WKND Sites 项目
构建克隆的 AEM WKND Sites 项目，并将其部署到 AEM as a Cloud Service。

查看 AEM WKND 网站项目 README.md 了解更多详细信息。

AEM 全栈项目前端工件流程 flow-of-frontend-artifacts

下面是一个全栈 AEM 项目中前端工件的 开发、部署和交付 流程的高级示意图。

前端工件的开发、部署和交付

在开发阶段，通过更新 ui.frontend/src/main/webpack 文件夹中的 CSS、JS 文件进行前端更改，例如确定样式和重新品牌化等。然后在构建期间，webpack module-bundler 和 maven 插件将这些文件转换为 ui.apps 模块下的优化 AEM 客户端库。

在 Cloud Manager 中运行全栈 管道时，前端更改被部署到 AEM as a Cloud Service 环境。

前端资源通过以 /etc.clientlibs/ 开头的 URI 路径被传递到网页浏览器，通常被缓存在 AEM Dispatcher 和内容传递网络上。

NOTE

与此相似，在 AEM 快速网站创建历程 中，前端更改通过运行__前端__管道被部署到 AEM as a Cloud Service 环境，请参阅设置您的管道

查看 WKND 网站项目中的 webpack 配置 development-frontend-webpack-clientlib

有三个 webpack 配置文件用于捆绑 WKND 网站前端资源。

webpack.common - 包含常见配置，用于指导 WKND 资源捆绑和优化。输出属性指示将其创建的合并文件（也称为 JavaScript 捆绑包，但不要与 AEM OSGi 捆绑包混淆）发送到何处。默认名称被设置为 clientlib-site/js/[name].bundle.js。

code language-javascript
`... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...`

webpack.dev.js 包含 webpack-dev-serve 的开发配置，并指向要使用的 HTML 模板。它还包含在 localhost:4502 上运行的 AEM 实例的代理配置。

code language-javascript
`... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...`

webpack.prod.js 包含生产配置，使用插件将开发文件转换为经过优化的捆绑包。

code language-javascript
`... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...`

捆绑资源通过 aem-clientlib-generator 插件被移动到 ui.apps 模块，并使用 clientlib.config.js 文件中管理的配置。

    ...
    const BUILD_DIR = path.join(__dirname, 'dist');
    const CLIENTLIB_DIR = path.join(
    __dirname,
    '..',
    'ui.apps',
    'src',
    'main',
    'content',
    'jcr_root',
    'apps',
    'wknd',
    'clientlibs'
    );
    ...

在 AEM 项目构建期间，来自 ui.frontend/pom.xml 的 frontend-maven-plugin 协调安排 webpack 捆绑和 clientlib 生成。

$ mvn clean install -PautoInstallSinglePackage

部署到 AEM as a Cloud Service deployment-frontend-aemaacs

全栈管道将这些更改部署到 AEM as a Cloud Service 环境。

从 AEM as a Cloud Service 交付 delivery-frontend-aemaacs

通过全栈管道部署的前端资源以 /etc.clientlibs 文件的形式从 AEM 网站被交付到网页浏览器。您可以访问公开托管的 WKND 网站并查看网页源代码，对此进行验证。

    ....
    <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-181cd4102f7f49aa30eea548a7715c31-lc.min.css" type="text/css">

    ...

    <script async src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-d4e7c03fe5c6a405a23b3ca1cc3dcd3d-lc.min.js"></script>
    ....

恭喜！ congratulations

祝贺您已查看全栈项目的 ui.frontend 模块

后续步骤 next-steps

在下一章更新项目以使用前端管道中，您将更新 AEM WKND Sites 项目，以便为前端管道契约启用它。

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9