檢閱完整棧疊AEM專案的「ui.frontend」模組 aem-full-stack-ui-frontent
在本章中,我們將檢閱完整棧疊AEM專案的前端成品開發、部署和傳遞,其重點為 WKND Sites專案 的「ui.frontend」模組。
目標 objective
- 瞭解AEM完整棧疊專案中前端成品的建置和部署流程
- 檢閱AEM完整棧疊專案的
ui.frontend
模組的webpack設定 - AEM使用者端程式庫(也稱為clientlibs)產生程式
AEM完整棧疊和快速網站建立專案的前端部署流程
先決條件 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上快取。
檢閱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專案以將其啟用為前端管道合約。