更新全堆疊 AEM 專案以便使用前端管道 update-project-enable-frontend-pipeline
在本章中，我們會對 WKND 網站專案 的設定檔進行變更，以便使用前端管道來部署 JavaScript 和 CSS，而不需要執行完整的全堆疊管道。這種做法可以把前端和後端成品的開發與部署生命週期分離，從整體上實現更快速的疊代式開發過程。
目標 objectives
- 更新全堆疊專案以便使用前端管道
全堆疊 AEM 專案設定變更概觀
先決條件 prerequisites
這是包含多個部分的教學課程，並假設您已經檢閱「ui.frontend」模組。
對全堆疊 AEM 專案的變更
為了進行測試，需要部署三個專案相關的設定變更以及一個樣式變更，因此 WKND 專案中總共有四個特定的變更，才能符合前端管道合約的要求。
-
移除全堆疊建置週期中的
ui.frontend模組- 在 WKND 網站專案的根目錄
pom.xml中，對<module>ui.frontend</module>子模組項目加入註解符號。
code language-xml ... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...- 並將
ui.apps/pom.xml中的相依性加入註解符號
code language-xml ... <!-- ====================================================================== --> <!-- D E P E N D E N C I E S --> <!-- ====================================================================== --> ... <!-- <dependency> <groupId>com.adobe.aem.guides</groupId> <artifactId>aem-guides-wknd.ui.frontend</artifactId> <version>${project.version}</version> <type>zip</type> </dependency> --> ... - 在 WKND 網站專案的根目錄
-
新增兩個新的 webpack 設定檔，為前端管道合約準備
ui.frontend模組。- 複製現有的
webpack.common.js並命名為webpack.theme.common.js，然後依下列方式變更output屬性、MiniCssExtractPlugin和CopyWebpackPlugin外掛程式的設定參數：
code language-javascript ... output: { filename: 'theme/js/[name].js', path: path.resolve(__dirname, 'dist') } ... ... new MiniCssExtractPlugin({ filename: 'theme/[name].css' }), new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './theme' } ] }) ...- 複製現有的
webpack.prod.js並命名為webpack.theme.prod.js，並將common變數的位置變更為上述檔案，如下：
code language-javascript ... const common = require('./webpack.theme.common.js'); ...note note NOTE 上述兩個「webpack」設定變更會產生不同的輸出檔案和資料夾名稱，因此我們可以輕鬆區分 clientlib 產生的 (全堆疊) 和主題產成的 (前端) 管道前端成品。 如您所猜測的，可以略過上述變更並使用現有的 webpack 設定，但是必須進行以下變更。 您可以自行決定要如何命名或進行整理。 - 在
package.json檔案中，確保name屬性值與/conf節點中的網站名稱相同。而在scripts屬性之下，build指令碼指示如何使用這個模組建置前端檔案。
code language-javascript { "name": "wknd", "version": "1.0.0", ... "scripts": { "build": "webpack --config ./webpack.theme.prod.js" } ... } - 複製現有的
-
新增兩個 Sling 設定，為前端管道準備
ui.content模組。- 在
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig建立一個檔案 - 其中包括ui.frontend模組使用 webpack 建置流程所產生並放在dist資料夾之下的所有前端檔案。
code language-xml ... <css jcr:primaryType="nt:unstructured" element="link" location="header"> <attributes jcr:primaryType="nt:unstructured"> <as jcr:primaryType="nt:unstructured" name="as" value="style"/> <href jcr:primaryType="nt:unstructured" name="href" value="/theme/site.css"/> ...note tip TIP 參閱 AEM WKND 網站專案 中完整的 HtmlPageItemsConfig。 - 第二，具有
themePackageName值的com.adobe.aem.wcm.site.manager.config.SiteConfig，與package.json和name屬性值相同，而siteTemplatePath指向/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0stub 路徑值。
code language-xml ... <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0" themePackageName="wknd"> </jcr:root> ...note tip TIP 參閱 AEM WKND 網站專案 中完整的 SiteConfig。 - 在
-
為了執行測試而透過前端管道部署的主題或樣式變更，我們更新
ui.frontend/src/main/webpack/base/sass/_variables.scss，以便把text-color變更為 Adobe 紅色 (您也可以自行選擇顏色)。code language-css $black: #a40606; ...
最後，將這些變更推送到程式的 Adobe Git 存放庫。
注意–「啟用前端管道」按鈕
邊欄選擇器的「網站」選項，在選取您的網站根目錄或網站頁面時，顯示「啟用前端管道」按鈕。點按「啟用前端管道」按鈕將會覆寫上述 Sling 設定，請確保您透過 Cloud Manager 管道執行部署上述變更之後，不會點按 到此按鈕。
如果不慎點按，您必須重新執行管道，以確保恢復前端管道合約和變更。
恭喜！ congratulations
恭喜，您已更新 WKND 網站專案，便其符合前端管道合約的要求。
後續步驟 next-steps
在下一章「使用前端管道進行部署」中，您將建立並執行前端管道，然後確認我們如何 不再使用 基於「/etc.clientlibs」的前端資源傳遞。