AEM Project Archetype包含選用、專屬的前端建置機制,以Webpack為基礎。 因此, ui.frontend模組會成為專案所有前端資源(包括JavaScript和CSS檔案)的中心位置。 若要充份運用這項有用而有彈性的功能,請務必瞭解前端開發如何與AEM專案整合。
AEM專案可簡化為由兩個獨立但相關的部分組成:
由於這兩個開發流程都集中在項目的不同部分,因此後端和前端開發可以並行進行。
但是,任何產生的項目都需要使用這兩種開發努力的產出,即後端和前端。
執行npm run dev
會啟動前端建置程式,收集儲存在ui.frontend模組中的JavaScript和CSS檔案,並產生兩個稱為clientlib-site
和clientlib-dependencies
的精簡用戶端程式庫或ClientLibs,並將它們儲存在ui.apps模組中。 ClientLib可部署至AEM,並可讓您將用戶端代碼儲存在儲存庫中。
當使用mvn clean install -PautoInstallPackage
執行整個AEM專案原型時,所有專案對象(包括ClientLib)都會推送至AEM例項。
進一步瞭解AEM如何在AEM開發檔案中處理ClientLibs、如何包含它們,或參閱下方的ui.frontend模組如何使用它們。
前端模組是使用AEM ClientLib提供。 當執行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
以生成ClientLibs在此流程中,AEM開發人員可執行步驟1和步驟2,並將靜態HTML傳遞給根據AEM HTML輸出進行開發的前端開發人員。
您也可以利用元件庫來擷取每個元件的標籤輸出範例,以便在元件層級而非頁面層級工作。
使用Storybook,您可以執行更多原子前端開發。 雖然Storybook未包含在AEM Project Archetype中,但您可以將它安裝並儲存在ui.frontend模組中的Storybook檔案。 當準備好在AEM中進行測試時,可執行npm run dev
,將它們部署為ClientLibs。
AEM Project Archetype中未包含Storybook。如果您選擇使用它,則必須個別安裝它。
不論您決定為您的專案實作的前端開發工作流程為何,後端開發人員和前端開發人員必須先同意標籤。 通常,AEM會定義由核心元件提供的標籤。 不過,如有必要,可自訂此項。
AEM Project Archetype包含選用的專屬前端建立機制,以Webpack為基礎,具備下列功能。
/clientlib/js
、/clientlib/css
或/clientlib/scss
下.content.xml
或js.txt
/css.txt
檔案。/component/
資料夾下的所有JS檔案。
sites.js
和vendors.js
。/clientlib-site
中的輸出檔案site.js
和site.css
,以及/clientlib-dependencies
中的dependencies.js
和dependencies.css
有關ui.frontend模組的更多技術資訊,請參閱GitHub](https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.frontend.general/README.md)上的[檔案。
npm install
。您必須使用運行帶有-DoptionIncludeFrontendModule=y
選項的原型來填入ui.frontend資料夾。
以下NPM指令碼驅動前端工作流:
npm run dev
-已停用JS最佳化(樹狀結構等)和來源地圖,並停用CSS最佳化的完整建置。npm run prod
-啟用JS最佳化(樹狀結構等)、停用來源地圖和啟用CSS最佳化的完整建置。npm run start
-啟動靜態網頁套件開發伺服器以進行本機開發,且對AEM的依賴性最小。ui.frontend模組會編譯ui.frontend/src
資料夾下的程式碼,並輸出已編譯的CSS和JS,以及名為ui.frontend/dist
資料夾下的任何資源。
site.js
版面相依影像和字型的資料 site.css
夾會建立在clientlib-site資料 resources/
dist/
夾中。dependencies.js
並 dependencies.css
在資料夾中創 dist/clientlib-dependencies
建。前端構建選項利用共用公共配置檔案的僅開發和僅生產webpack配置檔案。 這樣,可以單獨修改開發和生產設定。
ui.frontend模組建立程式運用aem-clientlib-generator外掛程式,將編譯的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
中的設定,從本機執行的AEM例項來代理這些CSS/JS。mvn -PautoInstallSinglePackage clean install
,將整個專案安裝至執行於localhost:4502
的AEM例項。ui.frontend
資料夾內導覽。npm run start
以啟動webpack dev伺服器。 啟動後,應開啟瀏覽器(localhost:8080
或下一個可用埠)。您現在可以修改CSS、JS、SCSS和TS檔案,並立即在webpack dev伺服器中看到這些變更。