Werk volledig-stapel AEM project bij om front-end pijpleiding te gebruiken update-project-enable-frontend-pipeline
In dit hoofdstuk, maken wij config veranderingen in WKND-siteproject om de front-end pijpleiding te gebruiken om JavaScript en CSS op te stellen, eerder dan het vereisen van een volledige stapelpijpleiding uitvoering. Dit ontkoppelt de ontwikkeling en plaatsingslevenscyclus van front-end en back-end artefacten, die voor een sneller, iteratief ontwikkelingsproces over het algemeen toestaan.
Doelstellingen objectives
- Werk volledig-stapelproject bij om de front-end pijpleiding te gebruiken
Overzicht van configuratieveranderingen in het full-stack AEM project
Vereisten prerequisites
Dit is een meerdelige zelfstudie en er wordt van uitgegaan dat u de Module 'ui.frontend'.
Veranderingen in het full-stack AEM project
Er zijn drie project-verwante config veranderingen en een stijlverandering om voor een testlooppas op te stellen, zo in totaal vier specifieke veranderingen in het project WKND om het voor het front-end pijpleidingscontract toe te laten.
-
Verwijder de
ui.frontend
module van volledige-stapelbouwstijlcyclus- In, de wortel van het Project van de Plaatsen van WKND
pom.xml
de opmerking<module>ui.frontend</module>
submodule-item.
code language-xml ... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...
- En de opmerking heeft betrekking op afhankelijkheid van de
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> --> ...
- In, de wortel van het Project van de Plaatsen van WKND
-
De
ui.frontend
module voor het front-end pijpleidingscontract door twee nieuwe webpack configuratiedossiers toe te voegen.- Bestaande kopiëren
webpack.common.js
alswebpack.theme.common.js
en wijzigenoutput
eigendom enMiniCssExtractPlugin
,CopyWebpackPlugin
config-parameters voor insteekmodule, zoals hieronder:
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' } ] }) ...
- Bestaande kopiëren
webpack.prod.js
alswebpack.theme.prod.js
en wijzigt u decommon
locatie van variabele naar het bovenstaande bestand als
code language-javascript ... const common = require('./webpack.theme.common.js'); ...
note note NOTE De bovenstaande twee configuratiewijzigingen in 'webpack' moeten verschillende uitvoerbestanden en mapnamen hebben, zodat we eenvoudig onderscheid kunnen maken tussen clientlib (Full-stack) en thema's die worden gegenereerd (front-end), frontale artefacten van de pijplijn. Zoals u hebt geraden, kunnen de bovenstaande wijzigingen worden overgeslagen om ook bestaande webpack-configuraties te gebruiken, maar de onderstaande wijzigingen zijn vereist. Het is aan jou hoe je ze wilt benoemen of organiseren. - In de
package.json
bestand, zorg ervoor dat dename
eigenschapswaarde is gelijk aan de naam van de site/conf
knooppunt. En onder descripts
eigenschap,build
script dat aangeeft hoe de bestanden aan de voorzijde van deze module moeten worden gemaakt.
code language-javascript { "name": "wknd", "version": "1.0.0", ... "scripts": { "build": "webpack --config ./webpack.theme.prod.js" } ... }
- Bestaande kopiëren
-
De
ui.content
module voor de front-end pijpleiding door twee Sling toe te voegen vormt.- Een bestand maken op
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- dit omvat alle front-end bestanden dieui.frontend
module genereert onder dedist
map met gebruik van webpack-constructieproces.
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 De volledige versie bekijken HtmlPageItemsConfig in de AEM WKND-siteproject. - Tweede
com.adobe.aem.wcm.site.manager.config.SiteConfig
met dethemePackageName
waarde gelijk aanpackage.json
enname
eigenschapswaarde ensiteTemplatePath
die verwijzen naar een/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0
stub path value.
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 Zie, de volledige SiteConfig in de AEM WKND-siteproject. - Een bestand maken op
-
Een thema of de stijlen veranderen om via front-end pijpleiding voor een testlooppas op te stellen, veranderen wij
text-color
aan Adobe rood (of u kunt uw kiezen) door bij te werkenui.frontend/src/main/webpack/base/sass/_variables.scss
.code language-css $black: #a40606; ...
Zet deze wijzigingen tot slot door in de git-opslagplaats voor Adoben van uw programma.
Voorzichtigheid - Vooruiteinde pijplijn inschakelen knop
De Spoorwegkiezer s Site geeft de optie Vooruiteinde pijplijn inschakelen als u de hoofdmap of sitepagina van uw site selecteert. Klikken Vooruiteinde pijplijn inschakelen De knop overschrijft het bovenstaande Sling-configuraties, zorg ervoor u klikt niet deze knop na het implementeren van de bovenstaande wijzigingen via de pijpleiding van Cloud Manager.
Als er per ongeluk op wordt geklikt, moet u de pijpleidingen opnieuw uitvoeren om ervoor te zorgen dat het frontend pijpleidingscontract en de veranderingen worden hersteld.
Gefeliciteerd! congratulations
Gefeliciteerd, hebt u het project van Plaatsen WKND bijgewerkt om het voor het front-end pijpleidingscontract toe te laten.
Volgende stappen next-steps
In het volgende hoofdstuk: Implementeren met behulp van de voorste pijplijn, zult u een front-end pijpleiding creëren en in werking stellen en zult verifiëren hoe wij weg van de '/etc.clientlibs' gebaseerde front-end resources levering.