更新完整棧疊AEM專案以使用前端管道 update-project-enable-frontend-pipeline
在本章中，我們會對 WKND Sites專案 進行設定變更，以使用前端管道來部署JavaScript和CSS，而不是要求完全的完整棧疊管道執行。 這會分離前端和後端成品的開發和部署生命週期，讓整體開發流程更快速、反覆無常。
目標 objectives
- 更新完整棧疊專案以使用前端管道
完整棧疊AEM專案中的設定變更概觀
先決條件 prerequisites
此教學課程包含多個部分，並假設您已檢閱'ui.frontend'模組。
完整棧疊AEM專案的變更
有三個與專案相關的設定變更和一個要針對測試回合部署的樣式變更，因此在WKND專案中總共有四個特定變更，以便為前端管道合約啟用它。
-
從完整棧疊建置週期移除
ui.frontend模組- 在中，WKND Sites專案的根
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 Sites專案的根
-
新增兩個新的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: './clientlib-site' } ] }) ...- 將現有的
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 Sites專案__中檢視完整的HtmlPageItemsConfig。 - 接著
com.adobe.aem.wcm.site.manager.config.SiteConfig的themePackageName值與package.json和name屬性值相同，且siteTemplatePath指向/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0存根路徑值。
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 Sites專案__中的完整SiteConfig。 - 在
-
主題或樣式變更為透過測試回合的前端管道部署，我們正在更新
ui.frontend/src/main/webpack/base/sass/_variables.scss以將text-color變更為Adobe紅色（或者您可以自行挑選）。code language-css $black: #a40606; ...
最後，將這些變更推送至您方案的AdobeGit存放庫。
警告 — 啟用前端管道 按鈕
邊欄選取器的站台選項會在選取您的站台根或站台頁面時顯示 啟用前端管道 按鈕。 按一下 啟用前端管道 按鈕將會覆寫上述 Sling設定，請確定 在透過Cloud Manager管道執行部署上述變更後，您沒有按一下 此按鈕。
如果錯誤地點選它，您必須重新執行管道以確保前端管道合約和變更恢復。
恭喜！ congratulations
恭喜，您已更新WKND Sites專案，以便為前端管道合約啟用它。
後續步驟 next-steps
在下一章使用前端管道部署中，您將建立和執行前端管道，並驗證我們如何 離開 基於「/etc.clientlibs」的前端資源傳遞。