Bekijk de module 'ui.frontend' van het AEM 'full-stack' project aem-full-stack-ui-frontent
In dit hoofdstuk bekijken we de ontwikkeling, implementatie en levering van front-end artefacten van een full-stack AEM project, door ons te richten op de 'ui.frontend' module van de WKND-siteproject.
Doelstellingen objective
- Begrijp de bouw en plaatsingsstroom van front-end artefacten in een AEM volledig-stapelproject
- Herzie de AEM volledig-stapel project
ui.frontend
module webpack configs - AEM clientbibliotheekproces (ook clientlibs genoemd)
Voorste-end plaatsingsstroom voor AEM volledig-stapel en Snelle projecten van de Plaats
Vereisten prerequisites
- Klonen met AEM WKND-siteproject
- Ontwikkeld en geïmplementeerd het gekloonde AEM WKND Sites-project om as a Cloud Service te AEM.
Zie het AEM WKND-siteproject README.md voor meer informatie .
AEM volledige-stapel project front-end artefactstroom flow-of-frontend-artifacts
Hieronder ziet u een vertegenwoordiging op hoog niveau van de ontwikkeling, implementatie en levering stroom van de front-end artefacten in een volledig-stapel AEM project.
Tijdens de ontwikkelingsfase worden front-end wijzigingen zoals opmaak en herbranding uitgevoerd door de CSS- en JS-bestanden van de ui.frontend/src/main/webpack
map. Tijdens de build-tijd webpack module-bundelaar en gefabriceerde stop zet deze dossiers in geoptimaliseerde AEM clientlibs onder ui.apps
-module.
Voorste veranderingen worden opgesteld aan AEM as a Cloud Service milieu wanneer het runnen van Volledig stapelen pijplijn in Cloud Manager.
De front-end bronnen worden via URI-paden aan de webbrowsers geleverd, te beginnen met /etc.clientlibs/
en worden doorgaans in de cache opgeslagen op AEM Dispatcher en CDN.
Webpack van het overzicht vormt in het project van Plaatsen WKND development-frontend-webpack-clientlib
-
Er zijn drie webpack configuratiebestanden die worden gebruikt om de front-end bronnen van de WKND-sites te bundelen.
webpack.common
- Dit bevat de gemeenschappelijk configuratie om de WKND middelbundeling en optimalisering te instrueren. De output Deze eigenschap vertelt waar de geconsolideerde bestanden (ook wel JavaScript-bundels genoemd, maar niet mogen worden verward met AEM OSGi-bundels) die worden gemaakt. De standaardnaam is ingesteld opclientlib-site/js/[name].bundle.js
.
code language-javascript ... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
webpack.dev.js
bevat de ontwikkeling -configuratie voor de webpack-dev-server en wijst naar de HTML-sjabloon die moet worden gebruikt. Het bevat ook een volmachtsconfiguratie aan een AEM instantie die op looptlocalhost:4502
.
code language-javascript ... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
webpack.prod.js
bevat de productie en gebruikt de plug-ins om de ontwikkelingsbestanden om te zetten in geoptimaliseerde bundels.
code language-javascript ... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
-
De gebundelde bronnen worden verplaatst naar de
ui.apps
module gebruiken aem-clientlib-generator insteekmodule, de configuratie gebruiken die in declientlib.config.js
bestand.
...
const BUILD_DIR = path.join(__dirname, 'dist');
const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'wknd',
'clientlibs'
);
...
- De frontend-maven-plugin van
ui.frontend/pom.xml
Orchestrates webpack bundling en clientlib generation tijdens AEM project build.
$ mvn clean install -PautoInstallSinglePackage
Implementatie naar AEM as a Cloud Service deployment-frontend-aemaacs
De Volledig stapelen pijpleiding stelt deze veranderingen in een AEM as a Cloud Service milieu op.
Levering van AEM as a Cloud Service delivery-frontend-aemaacs
De front-end middelen die via de full-stack pijpleiding worden opgesteld worden geleverd van de AEMPlaats aan Webbrowsers als /etc.clientlibs
bestanden. U kunt dit verifiëren door de openbaar gehoste WKND-site en weergavebron van de webpagina.
....
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-181cd4102f7f49aa30eea548a7715c31-lc.min.css" type="text/css">
...
<script async src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-d4e7c03fe5c6a405a23b3ca1cc3dcd3d-lc.min.js"></script>
....
Gefeliciteerd! congratulations
Gefeliciteerd, hebt u de module ui.frontend van het full-stack project gecontroleerd
Volgende stappen next-steps
In het volgende hoofdstuk: Project bijwerken voor gebruik van voorste pijplijn, zult u het AEM Project van de Plaatsen WKND bijwerken om het voor het front-end pijpleidingscontract toe te laten.