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

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

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

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

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

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

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

決定標籤 determining-markup

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

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

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

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

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

在此流程中，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將包含下列檔案和目錄：