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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined
undefined

在本章中，我们通过重点介绍 WKND Sites项目 的“ui.frontend”模块，回顾了全栈AEM项目的前端工件的开发、部署和交付。

目标 objective

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

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

IMPORTANT

此视频介绍并演示了 全栈和快速站点创建 项目的前端流程，以概述前端资源构建、部署和投放模型中的细微差异。

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

先决条件 prerequisites

克隆AEM WKND站点项目
构建克隆的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模块捆绑器和maven插件将这些文件转换为ui.apps模块下的优化AEM clientlibs。

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

前端资源通过以/etc.clientlibs/开头的URI路径传送到Web浏览器，通常缓存在AEM Dispatcher和CDN上。

NOTE

同样，在__AEM快速站点创建历程__中，通过运行__前端__管道，将前端更改部署到AEM as a Cloud Service环境。请参阅设置管道

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

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

webpack.common — 这包含用于指示WKND资源捆绑和优化的 common 配置。 output 属性说明在何处发出它创建的统一文件(也称为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({ ...}) } ...`

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

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

来自ui.frontend/pom.xml的 frontend-maven-plugin 在AEM项目构建期间编排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 Site传送到Web浏览器。您可以通过访问公开托管的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