更新全栈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站点项目__中的完整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”的前端资源交付。