檢閱完整棧疊AEM專案的「ui.frontend」模組 aem-full-stack-ui-frontent

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined
undefined

在本章中，我們將檢閱完整棧疊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模組套件組合器和Maven外掛程式會將這些檔案轉換成最佳化的AEM clientlibs，位於ui.apps模組下。

在AEM as a Cloud Service🔗中執行 完整棧疊 管道時，會將前端變更部署到Cloud Manager環境。

前端資源會透過以/etc.clientlibs/開頭的URI路徑傳送至網頁瀏覽器，通常會在AEM Dispatcher和CDN上快取。

NOTE

同樣地，在__AEM快速網站建立歷程__中，執行__前端__管道以將前端變更部署到AEM as a Cloud Service環境，請參閱設定您的管道

檢閱WKND Sites專案中的Webpack設定 development-frontend-webpack-clientlib

有三個 webpack 設定檔案可用來捆綁WKND Sites前端資源。

webpack.common — 這包含指示WKND資源繫結和最佳化的公用設定。 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執行個體的Proxy設定。

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

webpack.prod.js包含 production 設定，並使用外掛程式將開發檔案轉換為最佳化的組合。

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

使用aem-clientlib-generator外掛程式，使用clientlib.config.js檔案中管理的組態，將套件資源移至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

透過完整棧疊管道部署的前端資源會從AEM網站以/etc.clientlibs檔案的形式傳送到網頁瀏覽器。您可以造訪公開託管的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