Client-Bibliotheken und Frontend-Workflow client-side-libraries

Checken Sie die Verzweigung tutorial/client-side-libraries-start aus GitHub aus.

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Stellen Sie die Code-Basis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Wenn Sie VSCode oder eine andere IDE verwenden, öffnen Sie das Modul ui.apps.

Erweitern Sie den Pfad /apps/wknd/clientlibs, um die vom Archetyp generierten Clientlibs anzuzeigen.

Im folgenden Abschnitt werden diese Clientlibs ausführlicher erläutert.

In der folgenden Tabelle sind die Client-Bibliotheken zusammengefasst. Weitere Informationen zum Einschließen von Client-Bibliotheken finden Sie hier.

Beachten Sie, dass clientlib-site und clientlib-dependencies von der Quell-Code-Verwaltung ignoriert werden. Dies ist beabsichtigt, da diese zum Zeitpunkt der Erstellung durch das Modul ui.frontend generiert werden.

Öffnen Sie das Modul ui.frontend und navigieren Sie zu src/main/webpack/site.

Öffnen Sie die Datei main.scss

Die Datei main.scss ist der Einstiegspunkt zu den Sass-Dateien im Modul ui.frontend. Sie enthält die Datei _variables.scss mit einer Reihe von Markenvariablen, die in den verschiedenen Sass-Dateien des Projekts verwendet werden sollen. Die Datei _base.scss ist ebenfalls enthalten und definiert einige grundlegende Stile für HTML-Elemente. Ein regulärer Ausdruck enthält die Stile für einzelne Komponentenstile unter src/main/webpack/components. Ein weiterer regulärer Ausdruck enthält die Dateien unter src/main/webpack/site/styles.

Überprüfen Sie die Datei main.ts. Sie umfasst main.scss sowie einen regulären Ausdruck, um alle .js- oder .ts-Dateien im Projekt zu erfassen. Dieser Einstiegspunkt wird von den webpack-Konfigurationsdateien als Einstiegspunkt für das gesamte Modul ui.frontend verwendet.

Überprüfen Sie die Dateien unter src/main/webpack/site/styles:

Diese Dateistile betreffen globale Elemente in der Vorlage, z. B. Header, Footer und Hauptinhalts-Container. Die CSS-Regeln in diesen Dateien zielen auf verschiedene HTML-Elemente (header, main und footer) ab. Diese HTML-Elemente wurden durch Richtlinien im vorherigen Kapitel Seiten und Vorlagen definiert.

Erweitern Sie den Ordner components unter src/main/webpack und überprüfen Sie die Dateien.

Jede Datei wird einer Kernkomponente wie der Akkordeon-Komponente zugeordnet. Jede Kernkomponente wird mit Block Element Modifier(BEM)-Notation erstellt, um das Targeting bestimmter CSS-Klassen mit Stilregeln zu erleichtern. Die Dateien unter /components wurden vom AEM-Projektarchetyp mit den verschiedenen BEM-Regeln für die einzelnen Komponenten ignoriert.

Laden Sie die WKND-Basisstile wknd-base-styles-src-v3.zip herunter und entzippen Sie die Datei.

Um während des Tutorials Zeit zu sparen, werden mehrere Sass-Dateien, die die WKND-Marke basierend auf Kernkomponenten und der Struktur der Artikelseiten-Vorlage implementieren, bereitgestellt.

Überschreiben Sie den Inhalt von ui.frontend/src mit Dateien aus dem vorherigen Schritt. Der Inhalt der ZIP-Datei sollte die folgenden Ordner überschreiben:

/src/main/webpack
         /components
         /resources
         /site
         /static

Überprüfen Sie die geänderten Dateien, um Details zur WKND-Stilimplementierung anzuzeigen.

Öffnen Sie ein Befehlszeilen-Terminal und installieren Sie das Modul ui.frontend mit dem Befehl npm install:

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

Öffnen Sie ui.frontend/package.json und fügen Sie unter scripts im start-Befehl --env writeToDisk=true hinzu.

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

Starten Sie den webpack-Dev-Server im Modus watch, indem Sie den folgenden Befehl ausführen:

$ npm run watch

Dadurch werden die Quelldateien aus dem Modul ui.frontend kompiliert und die Änderungen mit AEM unter http://localhost:4502 synchronisiert.

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

Der Befehl npm run watch füllt schließlich clientlib-site und clientlib-dependencies im Modul ui.apps auf, das dann automatisch mit AEM synchronisiert wird.

Überprüfen Sie die Datei site.css unter ui.frontend/dist/clientlib-site/site.css. Dies ist die kompilierte CSS-Datei, die auf den Sass-Quelldateien basiert.

Überprüfen Sie die Datei ui.frontend/clientlib.config.js. Dies ist die Konfigurationsdatei für das npm-Plug-in aem-clientlib-generator, das den Inhalt von /dist in eine Client-Bibliothek umwandelt und in das Modul ui.apps verschiebt.

Überprüfen Sie die Datei site.css im Modul ui.apps unter ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Hierbei sollte es sich um eine identische Kopie der Datei site.css aus dem Modul ui.frontend handeln. Da sie sich nun im Modul ui.apps befindet, kann sie für AEM bereitgestellt werden.

Öffnen Sie den Artikel „LA Skatepark“ in AEM unter http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Sie sollten nun die aktualisierten Stile für den Artikel sehen. Möglicherweise müssen Sie einen Hard Refresh (harte Aktualisierung) durchführen, um etwaige vom Browser zwischengespeicherte CSS-Dateien zu löschen.

Das ist den Mockups doch schon viel ähnlicher!

Öffnen Sie vom Modul ui.frontend aus die Datei ui.frontend/src/main/webpack/site/_variables.scss.

Aktualisieren Sie die Farbvariable $brand-primary:

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

Speichern Sie die Änderungen.

Kehren Sie zum Browser zurück und aktualisieren Sie die AEM-Seite, um die Aktualisierungen anzuzeigen:

Setzen Sie die Änderung an der Farbe $brand-primary zurück und stoppen Sie den webpack-Build mit dem Befehl CTRL+C.

Navigieren Sie zur Artikelseiten-Vorlage unter http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.

Klicken Sie auf das Symbol Seiteninformationen und wählen Sie im Menü die Option Seitenrichtlinie aus, um das Dialogfeld Seitenrichtlinie anzuzeigen.

Seiteninformationen > Seitenrichtlinie

Beachten Sie, dass die Kategorien für wknd.dependencies und wknd.site hier aufgeführt sind. Standardmäßig werden Clientlibs, die über die Seitenrichtlinie konfiguriert werden, aufgeteilt, um CSS in den Seitenkopf und JavaScript am Textende einzuschließen. Sie können das Clientlib-JavaScript, das im Seitenkopf geladen wird, explizit auflisten. Dies ist der Fall für wknd.dependencies.

Navigieren Sie zur Seite LA Skateparks über die Artikelseiten-Vorlage: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Klicken Sie auf das Symbol Seiteninformationen und wählen Sie im Menü die Option Als veröffentlicht anzeigen aus, um die Artikelseite außerhalb des AEM-Editors zu öffnen.

Zeigen Sie die Seitenquelle von http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled an. Sie sollten die folgenden Clientlib-Verweise in <head> sehen:

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

Beachten Sie, dass die Clientlibs den /etc.clientlibs-Proxy-Endpunkt verwenden. Sie sollten auch sehen, dass die folgende Clientlib unten auf der Seite Folgendes enthält:

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

Kopieren Sie die Seitenquelle der LA Skatepark-Artikelseite unter http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Öffnen Sie Ihre IDE erneut. Fügen Sie das kopierte Markup aus AEM unter src/main/webpack/static in index.html im Modul ui.frontend ein.

Bearbeiten Sie das kopierte Markup und entfernen Sie alle Verweise auf clientlib-site und clientlib-dependencies:

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Entfernen Sie diese Verweise, da der webpack-Entwicklungs-Server diese Artefakte automatisch generiert.

Starten Sie den webpack-Dev-Server von einem neuen Terminal aus, indem Sie den folgenden Befehl im Modul ui.frontend ausführen:

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

Dadurch sollte ein neues Browser-Fenster unter http://localhost:8080/ mit statischem Markup geöffnet werden.

Bearbeiten Sie die Datei src/main/webpack/site/_variables.scss. Ersetzen Sie die Regel $text-color durch Folgendes:

- $text-color:              $black;
+ $text-color:              $pink;

Speichern Sie die Änderungen.

Die Änderungen sollten automatisch im Browser auf http://localhost:8080 zu sehen sein.

Überprüfen Sie die Datei /aem-guides-wknd.ui.frontend/webpack.dev.js. Diese enthält die webpack-Konfiguration, die zum Starten des webpack-Dev-Servers verwendet wird. Die Pfade /content und /etc.clientlibs werden dabei von einer lokal ausgeführten AEM-Instanz weitergeleitet. So werden die Bilder und andere (nicht vom ui.frontend-Code verwaltete) Client-Bibliotheken bereitgestellt.

Sie können den Webpack-Server stoppen, indem Sie CTRL+C in die Befehlszeile eingeben.