使用AEM專案原型的前端開發 front-end

AEM專案原型包括可選用的基於Webpack的專用前端建置機制。 因此,ui.frontend模組成為專案所有前端資源(包括JavaScript和CSS檔案)的中央位置。 若要充分利用這項實用且靈活的功能,請務必瞭解前端開發如何融入AEM專案。

本檔案著重於前端建置模組的一般使用模式及其對您的作用。 如需詳細的建置選項和技術指示,請參閱原型的GitHub存放庫中的檔案。

TIP
在GitHub上可找到最新的AEM專案原型和相關技術檔案

AEM前端和後端開發 front-end-back-end

簡而言之,AEM專案可視為包含兩個獨立但相關的部分:

  • 後端開發,用於驅動AEM邏輯並產生Java程式庫、OSGi服務等
  • 前端開發,可驅動所產生網站的呈現和行為,並產生JavaScript和CSS程式庫

由於這兩個開發流程專注於專案的不同部分,因此後端和前端開發可以同時進行。

前端工作流程圖表

但是,任何產生的專案都需要使用這兩種開發工作(即後端和前端)的輸出。

決定標籤 determining-markup

無論您決定為專案實施哪個前端開發工作流程,後端開發人員和前端開發人員都必須先同意標籤。 通常AEM會定義核心元件所提供的標籤。 不過,如有需要,可以自訂。

可能的前端開發工作流程 possible-workflows

前端建置模組是實用且非常靈活的工具,但並未提供其使用方式的詳細說明。 以下是​ 可能 ​使用的兩個範例,但您的個別專案需求可能會指示其他使用模型。

使用Webpack靜態開發伺服器 using-webpack

使用Webpack,您可以根據ui.frontend模組內AEM網頁的靜態輸出來進行樣式設定和開發。

  1. 使用頁面預覽模式或在URL中傳入wcmmode=disabled在AEM中預覽頁面
  2. 檢視頁面來源,並在ui.frontend模組中儲存為靜態HTML
  3. 啟動webpack並開始樣式化和產生必要的JavaScript和CSS
  4. 執行npm run dev以產生clientlibs

在此流程中,AEM開發人員可執行第一步和第二步,並將靜態HTML傳遞給根據AEMHTML輸出進行開發的前端開發人員。

TIP
您也可以利用元件庫來擷取每個元件的標籤輸出範例,以便在元件層級而非頁面層級上運作。

使用Storybook using-storybook

使用Storybook,您可以執行更多原子前端開發。 雖然Storybook未包含在AEM專案原型中,但您可以安裝它並將您的Storybook成品儲存在ui.frontend模組中。 準備好在AEM中進行測試時,可以執行npm run dev將其部署為clientlibs。

NOTE
Storybook未包含在AEM專案原型中。 如果您選擇使用它,則必須另外安裝。

Clientlibs概述 clientlibs

前端模組可使用AEM clientlib。。執行NPM建置指令碼時,會建置應用程式,且aem-clientlib-generator套件會擷取產生的建置輸出,並將其轉換為此類clientlib。

clientlib將包含下列檔案和目錄:

  • css/:可在HTML中要求的CSS檔案
  • css.txt:告知AEM css/中檔案的順序和名稱,以便將這些檔案合併
  • js/:可在HTML中請求的JavaScript檔案
  • js.txt告知AEM js/中的檔案順序和名稱,以便將這些檔案合併
  • resources/: Source對應、非入口點程式碼區塊(由程式碼分割產生)、靜態資產(例如圖示)等。
TIP
AEM開發檔案中進一步瞭解AEM如何處理clientlibs,並瞭解如何將其納入核心元件檔案。
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c