更新全栈 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: './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 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; ...
最后，将这些更改推送到项目的 Adobe git 存储库。
请注意——启用前端管道 按钮
当您选择网站根目录或网站页面时，边栏选择器的网站选项会显示 启用前端管道 按钮。点击 启用前端管道 按钮会覆盖上述 Sling 配置，请确保您在通过 Cloud Manager 管道执行部署了上述更改后 不要点击 这个按钮。
如果误点击此按钮，您就必须重新运行管道，以确保前端管道契约和更改重新恢复。
恭喜！ congratulations
祝贺您更新了 WKND Sites 项目，以便能为前端管道契约启用它。
后续步骤 next-steps
在下一章使用前端管道进行部署中，您将创建并运行前端管道，并验证我们如何 不再使用 基于“/etc.clientlibs”的前端资源交付。