使用AEM專案原型的前端開發 front-end
AEM專案原型包括可選用的基於Webpack的專用前端建置機制。 因此,ui.frontend模組成為專案所有前端資源(包括JavaScript和CSS檔案)的中央位置。 若要充分利用這項實用且靈活的功能,請務必瞭解前端開發如何融入AEM專案。
本檔案著重於前端建置模組的一般使用模式及其對您的作用。 如需詳細的建置選項和技術指示,請參閱原型的GitHub存放庫中的檔案。
AEM前端和後端開發 front-end-back-end
簡而言之,AEM專案可視為包含兩個獨立但相關的部分:
- 後端開發,用於驅動AEM邏輯並產生Java程式庫、OSGi服務等
- 前端開發,可驅動所產生網站的呈現和行為,並產生JavaScript和CSS程式庫
由於這兩個開發流程專注於專案的不同部分,因此後端和前端開發可以同時進行。
但是,任何產生的專案都需要使用這兩種開發工作(即後端和前端)的輸出。
決定標籤 determining-markup
無論您決定為專案實施哪個前端開發工作流程,後端開發人員和前端開發人員都必須先同意標籤。 通常AEM會定義核心元件所提供的標籤。 不過,如有需要,可以自訂。
可能的前端開發工作流程 possible-workflows
前端建置模組是實用且非常靈活的工具,但並未提供其使用方式的詳細說明。 以下是 可能 使用的兩個範例,但您的個別專案需求可能會指示其他使用模型。
使用Webpack靜態開發伺服器 using-webpack
使用Webpack,您可以根據ui.frontend模組內AEM網頁的靜態輸出來進行樣式設定和開發。
- 使用頁面預覽模式或在URL中傳入
wcmmode=disabled
在AEM中預覽頁面 - 檢視頁面來源,並在ui.frontend模組中儲存為靜態HTML
- 啟動webpack並開始樣式化和產生必要的JavaScript和CSS
- 執行
npm run dev
以產生clientlibs
在此流程中,AEM開發人員可執行第一步和第二步,並將靜態HTML傳遞給根據AEMHTML輸出進行開發的前端開發人員。
使用Storybook using-storybook
使用Storybook,您可以執行更多原子前端開發。 雖然Storybook未包含在AEM專案原型中,但您可以安裝它並將您的Storybook成品儲存在ui.frontend模組中。 準備好在AEM中進行測試時,可以執行npm run dev
將其部署為clientlibs。
Clientlibs概述 clientlibs
前端模組可使用AEM clientlib。。執行NPM建置指令碼時,會建置應用程式,且aem-clientlib-generator
套件會擷取產生的建置輸出,並將其轉換為此類clientlib。
clientlib將包含下列檔案和目錄:
css/
:可在HTML中要求的CSS檔案css.txt
:告知AEMcss/
中檔案的順序和名稱,以便將這些檔案合併js/
:可在HTML中請求的JavaScript檔案js.txt
告知AEMjs/
中的檔案順序和名稱,以便將這些檔案合併resources/
: Source對應、非入口點程式碼區塊(由程式碼分割產生)、靜態資產(例如圖示)等。