專案原型的AEMui.frontend模組

Project AEM Archetype包含選用、專屬的Webpack前端建置機制。 因此, ui.frontend模組會成為專案所有前端資源(包括JavaScript和CSS檔案)的中心位置。 若要充份運用這項有用而有彈性的功能,請務必瞭解前端開發如何整合至專AEM案。

項AEM目和前端開發

用極簡化的術語來AEM說,項目可以認為由兩個單獨但相關的部分組成:

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

由於這兩個開發流程都集中在項目的不同部分,因此後端和前端開發可以並行進行。

前端工作流程圖

但是,任何產生的項目都需要使用這兩種開發努力的產出,即後端和前端。

執行npm run dev會啟動前端建置程式,收集儲存在ui.frontend模組中的JavaScript和CSS檔案,並產生兩個稱為clientlib-siteclientlib-dependencies的精簡用戶端程式庫或ClientLibs,並將它們儲存在ui.apps模組中。 ClientLib可部署AEM,並允許您將客戶端代碼儲存在儲存庫中。

當使用<a0/AEM>運行整個項目原型時,所有項目對象(包括ClientLib)都會推送到實AEM例。mvn clean install -PautoInstallPackage

秘訣

進一步了AEM解如何在開發檔案AEM中處理ClientLibs、如何包含它們,或參閱下方的ui.frontend模組如何使用它們。

ClientLibs概述

前端模組使用AEM ClientLib提供。 當執行NPM組建指令碼時,應用程式會建立,而aem-clientlib-generator套件會擷取產生的組建輸出,並將它轉換為此類的ClientLib。

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

  • css/:可在HTML中要求的CSS檔案
  • css.txt:告AEM訴檔案的順序和名 css/ 稱,以便合併
  • js/:可在HTML中要求的JavaScript檔案
  • js.txt 告AEM訴檔案的順序和名 js/ 稱,以便合併
  • resources/:原始碼地圖、非登入點程式碼區塊(由程式碼分割產生)、靜態資產(例如圖示)等。

可能的前端開發工作流程

前端構建模組是一種實用、靈活的工具,但對應如何使用它沒有特別意見。 以下是​可能的​使用情形的兩個範例,但您的個別專案需求可能會決定其他使用模式。

使用Webpack Static Development Server

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

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

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

秘訣

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

使用Storybook

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

注意

Storybook 不包含在AEMProject Archetype中。如果您選擇使用它,則必須個別安裝它。

確定標籤

不論您決定為您的專案實作的前端開發工作流程為何,後端開發人員和前端開發人員必須先同意標籤。 通常AEM定義由核心元件提供的標籤。 不過,如有必要,可自訂此項

ui.frontend模組

Project AEM Archetype包含可選的專屬前端建立機制,以Webpack為基礎,具備下列功能。

  • 完整TypeScript、ES6和ES5支援(含適用的Webpack包裝函式)
  • 使用TSLint規則集的TypeScript和JavaScript連結
  • ES5輸出,以支援舊版瀏覽器
  • 萬用字元
    • 無需隨處新增匯入
    • 現在,所有JS和CSS檔案都可新增至每個元件。
      • 最佳做法是在/clientlib/js/clientlib/css/clientlib/scss
    • 由於所有內容都通過Webpack運行,因此不需要.content.xmljs.txt/css.txt檔案。
    • 全局提取/component/資料夾下的所有JS檔案。
      • Webpack可讓CSS/SCSS檔案透過JS檔案連結。
      • 它們被拉進兩個入口點,sites.jsvendors.js
    • 唯一使用的AEM檔案是/clientlib-site中的site.jssite.css以及/clientlib-dependencies中的dependencies.jsdependencies.css輸出檔案
  • 區塊
    • 主要(網站js/css)
    • 廠商(相依性js/css)
  • 完整的Sass/Scss支援(Sass會透過Webpack編譯為CSS)
  • 將內建Proxy的靜態網路套件開發伺服器內建至本機例AEM項
注意

有關ui.frontend模組的更多技術資訊,請參閱GitHub🔗上的檔案。

安裝

  1. 全域安裝NodeJS(v10+)。 這也將安裝npm。
  2. 導覽至專案中的ui.frontend,然後執行npm install
注意

您必須使用運行帶有-DoptionIncludeFrontendModule=y選項的原型來填入ui.frontend資料夾。

使用狀況

以下NPM指令碼驅動前端工作流:

  • npm run dev -已停用JS最佳化(樹狀結構等)和來源地圖,並停用CSS最佳化的完整建置。
  • npm run prod -啟用JS最佳化(樹狀結構等)、停用來源地圖和啟用CSS最佳化的完整建置。
  • npm run start -啟動靜態webpack開發伺服器,以便進行本地開發,並且對其依賴性最小AEM。

輸出

ui.frontend模組會編譯ui.frontend/src資料夾下的程式碼,並輸出已編譯的CSS和JS,以及名為ui.frontend/dist資料夾下的任何資源。

  • 網站 -和 site.js版面相依影像和字型的資料 site.css 夾會建立在clientlib-site資料 resources/ dist/夾中。
  • 相依性 - dependencies.jsdependencies.css 在資料夾中創 dist/clientlib-dependencies 建。

JavaScript

  • 最佳化——對於生產組建,所有未使用或呼叫的JS都會移除。

CSS

  • 自動預修——所有CSS都會透過預修器執行,而任何需要預修的屬性都會自動將這些屬性加入CSS中。
  • 最佳化——在貼文時,所有CSS都會透過最佳化程式(cssnano)執行,並根據下列預設規則將它標準化:
    • 盡可能減少CSS計算運算式,確保瀏覽器相容性和壓縮性
      在等效長度、時間和角度值之間轉換。 請注意,預設情況下,不會轉換長度值。
    • 移除規則、選擇器與宣告中及周圍的注釋
    • 刪除重複的規則、at-rules和聲明
      • 請注意,這隻適用於完全重複的檔案。
    • 移除空的規則、媒體查詢和具有空選擇器的規則,因為它們不會影響輸出
    • 由選擇器和重疊的屬性/值對合併相鄰規則
    • 確保CSS檔案中只有單一@charset,並將它移至檔案頂端
    • 當產生的輸出較小時,以實際值取代CSS初始關鍵字
    • 使用SVGO壓縮內嵌SVG定義
  • 清除——包含明確的清除工作,以視需要清除產生的CSS、JS和Map檔案。
  • 源映射——僅構建開發
注意

前端構建選項利用共用公共配置檔案的僅開發和僅生產webpack配置檔案。 這樣,可以單獨修改開發和生產設定。

客戶端庫生成

ui.frontend模組建立程式運用aem-clientlib-generator外掛程式,將編譯的CSS、JS和任何資源移入ui.apps模組。 aem-clientlib-generator組態定義於clientlib.config.js。 將生成以下客戶端庫:

  • clientlib-site - ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
  • clientlib-dependences - 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>

當然,上述包含可通過更新頁面策略和/或修改各客戶端庫的類別和嵌入屬性來修改。

靜態Webpack開發伺服器

ui.frontend模組中包含webpack-dev-server,可提供即時重新載入,以便在外部快速進行前端開AEM發。 此設定會運用html-webpack-plugin,自動將從ui.frontend模組編譯的CSS和JS插入靜態HTML範本。

重要檔案

  • ui.frontend/webpack.dev.js
    • 這包含webpack-dev-serve的設定,並指向要使用的html範本。
    • 它還包含運行於localhost:4502AEM上的實例的代理配置。
  • ui.frontend/src/main/webpack/static/index.html
    • 這是伺服器將針對的靜態HTML。
    • 這可讓開發人員進行CSS/JS變更,並立即在標籤中反映。
    • 假定放置在此檔案中的標籤能夠準確反映由元件生成的標AEM記。
    • 此檔案中的標籤不會與元件標籤自動AEM同步。
    • 此檔案也包含儲存在中的用戶端程式庫AEM的參考,例如核心元件CSS和回應式格線CSS。
    • Webpack開發伺服器會設定為根據ui.frontend/webpack.dev.js中的設定,從本機執AEM行例項來代理這些CSS/JS。

使用

  1. 從項目的根目錄運行命令mvn -PautoInstallSinglePackage clean install ,將整個項目安裝到運行AEM在localhost:4502的實例。
  2. ui.frontend資料夾內導覽。
  3. 運行以下命令npm run start以啟動webpack dev伺服器。 啟動後,應開啟瀏覽器(localhost:8080或下一個可用埠)。

您現在可以修改CSS、JS、SCSS和TS檔案,並立即在webpack dev伺服器中看到這些變更。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now