項目AEM原型包括基於Webpack的可選專用前端構建機制。 因此, ui.frontend模組成為項目所有前端資源(包括JavaScript和CSS檔案)的中心位置。 要充分利用這一有用而靈活的功能,瞭解前端開發如何適合項目是非常重AEM要的。
用極簡化的術語AEM來說,項目可以認為由兩個單獨但相關的部分組成:
由於這兩個開發過程都集中在項目的不同部分,因此後端和前端開發可以並行進行。
然而,任何由此產生的項目都需要利用這些發展努力的產出,即後端和前端。
正在運行 npm run dev
啟動前端生成過程,該過程收集儲存在ui.frontend模組中的JavaScript和CSS檔案,並生成兩個名為的微型客戶端庫或ClientLib clientlib-site
和 clientlib-dependencies
並儲存在ui.apps模組中。 ClientLib可部署AEM到儲存庫中,並允許您將客戶端代碼儲存在儲存庫中。
當整個項AEM目原型使用 mvn clean install -PautoInstallPackage
然後,將包括ClientLibs在內的所有項目對象推送到實AEM例。
瞭解有關如何處理AEMClientLib的詳細資訊 AEM開發文檔,如何 包括,請參閱下面 ui.frontend模組如何使用它們。
前端模組使用 客戶AEM端庫。 執行NPM生成指令碼時,將生成應用程式,並且aem-clientlib-generator包將獲取生成的生成輸出並將其轉換為這樣的ClientLib。
ClientLib將包含以下檔案和目錄:
css/
:可在HTML中請求的CSS檔案css.txt
:指示AEM中檔案的順序和名稱 css/
這樣它們就可以合併js/
:可在HTML中請求的JavaScript檔案js.txt
指示AEM中檔案的順序和名稱 js/
這樣它們就可以合併resources/
:源映射、非入口點代碼塊(由代碼拆分產生)、靜態資產(如表徵圖)等。前端構建模組是一種有用且非常靈活的工具,但並未就如何使用它提出具體意見。 以下是兩個示例 可能 使用情況,但您的單個項目需要可能決定其他使用模式。
使用Webpack,您可以根據ui.frontend模組內AEM網頁的靜態輸出來設計和開發。
wcmmode=disabled
的子菜單。npm run dev
生成ClientLib在該流中,AEM顯影劑可執行步驟1和2,並將靜態HTML傳遞給基於HTML輸出進行開發的前AEM端顯影劑。
你也可以利用 元件庫 捕獲每個元件的標籤輸出的示例,以便在元件級別而不是頁面級別工作。
使用 故事書 可以進行更多原子前端開發。 儘管Storybook未包括在項AEM目原型中,但您可以安裝它,並將Storybook檔案儲存在ui.frontend模組中。 當準備在中進行測AEM試時,可以通過運行將其部署為ClientLibs npm run dev
。
故事書 未包含在項AEM目原型中。 如果選擇使用它,則必須單獨安裝它。
無論您決定為您的項目實施哪個前端開發流程,後端開發人員和前端開發人員都必須首先就標籤達成一致。 通常AEM定義由核心元件提供的標籤。 但是,如有必要,可以自定義此項。
項目AEM原型包括基於Webpack的可選專用前端構建機制,具有以下功能。
/clientlib/js
。 /clientlib/css
或 /clientlib/scss
.content.xml
或 js.txt
/css.txt
所有內容都通過Webpack運行時,需要檔案。/component/
的子菜單。
sites.js
和 vendors.js
。site.js
和 site.css
在 /clientlib-site
以及 dependencies.js
和 dependencies.css
在 /clientlib-dependencies
有關ui.frontend模組的詳細資訊,請參閱 GitHub上的文檔。
npm install
。你一定有 運行原型 選項 -DoptionIncludeFrontendModule=y
填充ui.frontend資料夾。
以下npm指令碼驅動前端工作流:
npm run dev
— 禁用JS優化(樹搖動等)和啟用源映射並禁用CSS優化的完全生成。npm run prod
— 啟用JS優化(樹搖動等)、禁用源映射和啟用CSS優化的完全生成。npm run start
— 啟動靜態WebPack開發伺服器,以便進行本地開發,並且對它的依賴性AEM最小。ui.frontend模組在 ui.frontend/src
資料夾,並輸出已編譯的CSS和JS以及名為 ui.frontend/dist
。
site.js
。 site.css
和 resources/
用於佈局相關影像和字型的資料夾 dist/
客戶端lib站點資料夾。dependencies.js
和 dependencies.css
在 dist/clientlib-dependencies
的子菜單。前端生成選項利用共用公共配置檔案的僅開發和僅生產webpack配置檔案。 這樣可以獨立地修改開發和生產設定。
ui.frontend模組生成過程利用 aem-clientlib生成器 插件,用於將編譯的CSS、JS和任何資源移入ui.apps模組。 aem-clientlib-generator配置在中定義 clientlib.config.js
。 將生成以下客戶端庫:
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
clientlib-site
和 clientlib-dependencies
類別通過 頁面策略配置 作為預設模板的一部分。 要查看策略,請編輯 內容頁面模板>頁面資訊>頁面策略。
最終將客戶端庫包含在站點頁面中如下:
<HTML>
<head>
<link rel="stylesheet" href="clientlib-base.css" type="text/css">
<script type="text/javascript" src="clientlib-dependencies.js"></script>
<link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="clientlib-site.css" type="text/css">
</head>
<body>
....
<script type="text/javascript" src="clientlib-site.js"></script>
<script type="text/javascript" src="clientlib-base.js"></script>
</body>
</HTML>
當然,可以通過更新頁面策略和/或修改各客戶端庫的類別和嵌入屬性來修改上述包含。
ui.frontend模組中包括webpack-dev-server,它提供即時重裝,以便在外部進行快速前端開AEM發。 安裝程式利用html-webpack-plugin自動將從ui.frontend模組編譯的CSS和JS注入靜態HTML模板。
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
。mvn -PautoInstallSinglePackage clean install
將整個項目安裝到運行AEM於 localhost:4502
。ui.frontend
的子菜單。npm run start
啟動webpack dev伺服器。 啟動後應開啟瀏覽器(localhost:8080
或下一個可用埠)。現在,您可以修改CSS、JS、SCSS和TS檔案,並查看立即反映在webpack dev伺服器中的更改。