Der AEM-Projektarchetyp enthält einen optionalen, dedizierten Frontend-Build-Mechanismus, der auf Webpack basiert. Das ui.frontend-Modul wird damit zum zentralen Speicherort für alle Frontend-Ressourcen des Projekts, einschließlich JavaScript- und CSS-Dateien. Um diese nützliche und flexible Funktion in vollem Umfang nutzen zu können, müssen Sie wissen, welchen Anteil die Frontend-Entwicklung an einem AEM-Projekt hat.
In stark vereinfachten Begriffen kann davon ausgegangen werden, dass AEM-Projekte aus zwei separaten, aber miteinander verbundenen Teilen bestehen:
Da sich diese beiden Entwicklungsprozesse auf verschiedene Teile des Projekts konzentrieren, kann die Backend- und Frontend-Entwicklung parallel erfolgen.
Jedes daraus resultierende Projekt muss jedoch die Ergebnisse beider Entwicklungsmaßnahmen nutzen, d. h. sowohl für das Backend als auch für das Frontend.
Beim Ausführen von npm run dev
wird der Frontend-Build-Prozess gestartet, der die im ui.frontend-Modul gespeicherten JavaScript- und CSS-Dateien erfasst und zwei minimierte Client-Bibliotheken (oder ClientLibs) namens clientlib-site
und clientlib-dependencies
erzeugt und im ui.apps-Modul ablegt. ClientLibs können in AEM bereitgestellt werden und ermöglichen die Speicherung des Client-seitigen Codes im Repository.
Wenn der gesamte AEM-Projektarchetyp mit mvn clean install -PautoInstallPackage
ausgeführt wird, werden alle Projektartefakte einschließlich der ClientLibs an die AEM-Instanz gesendet.
In der AEM Entwicklungsdokumentation erfahren Sie mehr darüber, wie AEM mit ClientLibs umgeht und wie sie eingeschlossen werden. Außerdem erfahren Sie weiter unten, wie das ui.frontend-Modul sie verwendet.
Das Frontend-Modul wird mithilfe einer AEM ClientLib bereitgestellt. Beim Ausführen des NPM Build-Skripts wird das Programm erstellt und das aem-clientlib-generator-Paket nimmt die resultierende Buildausgabe entgegen und wandelt sie in eine solche ClientLib um.
Eine ClientLib besteht aus den folgenden Dateien und Verzeichnissen:
css/
: CSS-Dateien, die im HTML-Code angefordert werden könnencss.txt
: Teilt AEM die Reihenfolge und Namen der Dateien in css/
mit, damit sie zusammengeführt werden könnenjs/
: JavaScript-Dateien, die im HTML-Code angefordert werden könnenjs.txt
: Teilt AEM die Reihenfolge und Namen der Dateien in js/
mit, damit sie zusammengeführt werden könnenresources/
: Quellzuordnungen, Nicht-Einstiegspunkt-Codeblöcke (die aus der Codeaufteilung resultieren), statische Kreativelemente (z. B. Symbole) usw.Das Frontend-Build-Modul ist ein nützliches und sehr flexibles Werkzeug ohne spezielle Vorgaben dazu, wie es verwendet werden sollte. Im Folgenden finden Sie zwei Beispiele für die mögliche Verwendung, aber Ihre individuellen Projektanforderungen können andere Anwendungsmodelle erforderlich machen.
Mit Webpack können Sie auf Basis der statischen Ausgabe von AEM-Webseiten innerhalb des ui.frontend-Moduls formatieren und entwickeln.
wcmmode=disabled
in die URL ein.npm run dev
zum Generieren der ClientLibs aus.In diesem Workflow kann ein AEM-Entwickler die Schritte 1 und 2 ausführen sowie den statischen HTML-Code an den Frontend-Entwickler weiterleiten, der die AEM-HTML-Ausgabe zur Entwicklung nutzt.
Man kann auch mit der Komponentenbibliothek Beispiele der Markup-Ausgabe jeder Komponente erfassen, um auf Komponentenebene und nicht auf Seitenebene zu arbeiten.
Mit Storybook können Sie mehr atomare Frontend-Entwicklung durchführen. Obwohl Storybook nicht im AEM-Projektarchetyp enthalten ist, können Sie das Programm installieren und Ihre Storybook-Artefakte im ui.frontend-Modul speichern. Sobald diese für Tests in AEM bereit sind, können sie durch Ausführen von npm run dev
als ClientLibs bereitgestellt werden.
Storybook ist nicht im AEM-Projektarchetyp enthalten. Wenn Sie das Programm verwenden möchten, müssen Sie es separat installieren.
Unabhängig davon, welchen Frontend-Entwicklungs-Workflow Sie für Ihr Projekt implementieren, müssen sich die Backend-Entwickler und Frontend-Entwickler zunächst auf das Markup einigen. In der Regel definiert AEM das Markup, das von den Core-Komponenten bereitgestellt wird. Dies kann jedoch bei Bedarf angepasst werden.
Das AEM-Projektarchiv enthält einen optionalen, dedizierten Frontend-Build-Mechanismus, der auf Webpack basiert und die folgenden Funktionen enthält.
/clientlib/js
, /clientlib/css
oder /clientlib/scss
.content.xml
oder js.txt
/css.txt
sind nicht erforderlich, da alles über Webpack ausgeführt wird./component/
Ordner ab.
sites.js
und vendors.js
.site.js
und site.css
in /clientlib-site
sowie dependencies.js
und dependencies.css
in /clientlib-dependencies
Weitere technische Informationen zum ui.frontend-Modul finden Sie in der Dokumentation zu GitHub.
npm install
.Um den ui.frontend-Ordner zu füllen, müssen Sie den Archetyp ausführen und dabei die Option -DoptionIncludeFrontendModule=y
verwenden.
Die folgenden npm-Skripten verhelfen zum Frontend-Arbeitsablauf:
npm run dev
- Vollständige Erstellung mit deaktivierter JS-Optimierung (Baum-Shaking usw.) und aktivierten Quellkarten und deaktivierter CSS-Optimierung.npm run prod
- Vollständige Erstellung mit aktivierter JS-Optimierung (Baum-Shaking usw.), deaktivierter Quellzuordnung und aktivierter CSS-Optimierung.npm run start
- Startet einen statischen Webpack Development Server für die lokale Entwicklung mit minimalen Abhängigkeiten von AEM.Das ui.frontend-Modul kompiliert den Code unter dem Ordner ui.frontend/src
und gibt den kompilierten CSS- und JS-Code sowie alle Ressourcen unter dem Ordner ui.frontend/dist
aus.
site.js
, site.css
und ein Ordner resources/
für Layout-abhängige Bilder und Schriftarten werden im Clientlib-Site-Ordner dist/
erstellt.dependencies.js
und dependencies.css
werden in einem Ordner dist/clientlib-dependencies
erstellt.Die Option zum Erstellen des Frontend verwendet Konfigurationsdateien des nur dev- und prod-only webpack, die eine gemeinsame Konfigurationsdatei gemeinsam haben. Auf diese Weise können Entwicklungs- und Produktionseinstellungen unabhängig verändert werden.
Der Prozess zum Erstellen des ui.frontend-Moduls nutzt das Plug-in aem-clientlib-generator, um den kompilierten CSS- und JS-Code sowie alle Ressourcen in das ui.apps-Modul zu verschieben. Die Konfiguration von aem-clientlib-generator ist in clientlib.config.js
definiert. Die folgenden Client-Bibliotheken werden generiert:
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
Die Kategorien clientlib-site
und clientlib-dependencies
sind auf den Seiten über die Seitenrichtlinien-Konfiguration als Teil der Standardvorlage enthalten. Um die Richtlinie anzuzeigen, bearbeiten Sie die Inhaltsseitenvorlage > Seiteninformationen > Seitenrichtlinie.
Die endgültige Einbindung von Client-Bibliotheken auf der Seite „Sites“ erfolgt wie folgt:
<HTML>
<head>
<link rel="stylesheet" href="clientlib-base.css" type="text/css">
<script type="text/javascript" src="clientlib-dependencies.js"></script>
<link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="clientlib-site.css" type="text/css">
</head>
<body>
....
<script type="text/javascript" src="clientlib-site.js"></script>
<script type="text/javascript" src="clientlib-base.js"></script>
</body>
</HTML>
Die oben genannte Einbindung kann natürlich durch Aktualisierung der Seitenrichtlinie bzw. Änderung der Kategorien und Einbettungseigenschaften der jeweiligen Client-Bibliotheken geändert werden.
Im ui.frontend-Modul ist ein webpack-dev-server enthalten, der ein Live-Neuladen für eine schnelle Frontend-Entwicklung außerhalb von AEM ermöglicht. Das Setup nutzt das html-webpack-plugin, um aus dem ui.frontend-Modul kompilierten CSS- und JS-Code automatisch in eine statische HTML-Vorlage zu injizieren.
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
im Proxy zwischenspeichert.mvn -PautoInstallSinglePackage clean install
aus, um das gesamte Projekt in einer AEM-Instanz zu installieren, die auf localhost:4502
ausgeführt wird.ui.frontend
.npm run start
aus, um den Webpack Development Server zu starten. Nach dem Start sollte ein Browser (localhost:8080
oder der nächste verfügbare Port) geöffnet werden.Sie können jetzt CSS-, JS-, SCSS- und TS-Dateien ändern und die Änderungen sofort im Webpack Development Server anzeigen.