使用 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 傳遞給根據 AEM HTML 輸出進行開發的前端開發人員。

使用 Storybook using-storybook

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

Clientlib 概觀 clientlibs

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

Clientlib 將由下列檔案和目錄組成：