Clientbibliotheken en front-end workflow client-side-libraries

Controle uit de tutorial/client-side-libraries-start tak van ​ GitHub ​

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

Stel codebasis aan een lokale instantie van AEM op gebruikend uw Maven vaardigheden:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Het gebruiken van VSCode of andere winde opent omhoog de {module 0} ui.apps.

Breid de weg /apps/wknd/clientlibs uit om de clientlibs te bekijken die door archetype worden geproduceerd.

In de onderstaande sectie worden deze clientlibs nader bekeken.

De volgende tabel geeft een overzicht van de clientbibliotheken. Meer details over ​ met inbegrip van de Bibliotheken van de Cliënt kunnen hier ​ worden gevonden.

Let op: clientlib-site en clientlib-dependencies worden genegeerd vanuit bronbesturing. Dit is door ontwerp, aangezien deze bij bouwstijltijd door de ui.frontend module worden geproduceerd.

Open omhoog de {module 0} ui.frontend en navigeer aan src/main/webpack/site.

Het bestand openen main.scss

main.scss is het ingangspunt voor de dossiers van de Klasse in de ui.frontend module. Het bevat het bestand _variables.scss , dat een reeks merkvariabelen bevat die in de verschillende geluidsbestanden van het project moeten worden gebruikt. Het bestand _base.scss is ook opgenomen en definieert enkele basisstijlen voor HTML-elementen. Een reguliere expressie bevat de stijlen voor afzonderlijke componentstijlen onder src/main/webpack/components . Een andere reguliere expressie bevat de bestanden onder src/main/webpack/site/styles .

Controleer het bestand main.ts . Het bevat main.scss en een reguliere expressie voor het verzamelen van .js - of .ts -bestanden in het project. Dit ingangspunt wordt gebruikt door de ​ dossiers van de webpakconfiguratie ​ als ingangspunt voor de volledige ui.frontend module.

Controleer de bestanden onder src/main/webpack/site/styles :

Deze bestanden zijn stijlen voor algemene elementen in de sjabloon, zoals Koptekst, Voettekst en container met hoofdinhoud. De CSS-regels in deze bestanden zijn gericht op verschillende HTML-elementen header , main en footer . Deze elementen van HTML werden bepaald door beleid in het vorige hoofdstuk ​ Pagina's en Malplaatjes ​.

Vouw de map components onder src/main/webpack uit en inspecteer de bestanden.

Elk dossier brengt aan een Component van de Kern zoals de ​ Component van de Accordeon ​ in kaart. Elke Component van de Kern wordt gebouwd met ​ Modifier van het Element van het Blok ​ of BEM aantekening om het gemakkelijker te maken om specifieke CSS klassen met stijlregels te richten. De bestanden onder /components zijn door het AEM Project Archetype uitgesneden met de verschillende BEM-regels voor elke component.

Download de Stijlen van de Basis WKND wknd-base-styles-src-v3.zip en unzip het dossier.

Om de zelfstudie te versnellen, worden verschillende Sass-bestanden weergegeven die het WKND-merk implementeren op basis van Core Components en de structuur van het sjabloon voor artikelpagina.

Overschrijf de inhoud van ui.frontend/src met bestanden uit de vorige stap. De inhoud van de ZIP moet de volgende mappen overschrijven:

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

Controleer de gewijzigde bestanden om details van de WKND-stijlimplementatie te bekijken.

Open een bevel-lijn terminal en installeer ui.frontend module gebruikend het npm install bevel:

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

Open ui.frontend/package.json en in het manuscripten begin bevel voegt --env writeToDisk=true toe.

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

Begin de webpack dev server op horloge wijze door het volgende bevel in werking te stellen:

$ npm run watch

Dit compileert de brondossiers van de ui.frontend module en synchroniseert de veranderingen met AEM in ​ http://localhost:4502 ​

+ 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

Het bevel npm run watch bevolkt uiteindelijk de clientlib-plaats en client-afhankelijkheden in de ui.apps module die dan automatisch met AEM wordt gesynchroniseerd.

Controleer het bestand site.css onder ui.frontend/dist/clientlib-site/site.css . Dit is gecompileerde CSS die op de brondossiers van de Klasse wordt gebaseerd.

Controleer het bestand ui.frontend/clientlib.config.js . Dit is het configuratiedossier voor een npm stop, ​ aem-clientlib-generator ​ die de inhoud van /dist in een cliëntbibliotheek omzet en het naar de ui.apps module verplaatst.

Inspecteer het dossier site.css in de {module 1} ui.apps bij ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Dit zou een identiek exemplaar van het site.css dossier van de {module 1} ui.frontend moeten zijn. Nu het in ui.apps module is kan het aan AEM worden opgesteld.

Open het artikel van LA Skatepark in AEM in: ​ http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html ​.

De bijgewerkte stijlen voor het artikel worden nu weergegeven. Mogelijk moet u op de een of andere manier vernieuwen om CSS-bestanden te wissen die in cache zijn geplaatst door de browser.

Het begint veel dichter bij de mockups te komen!

Open vanuit de module ui.frontend het bestand: ui.frontend/src/main/webpack/site/_variables.scss .

Werk de kleurvariabele $brand-primary bij:

//== variables.css

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

Sla de wijzigingen op.

Ga terug naar de browser en vernieuw de AEM-pagina om de updates te zien:

Vorige versie de wijziging in de $brand-primary -kleur en stop de webpack-bewerking met de opdracht CTRL+C .

Blader naar het malplaatje van de Pagina van het Artikel in ​ http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Klik het pictogram van de Informatie van de Pagina en in het menu uitgezocht Beleid van de Pagina om de dialoog van het Beleid van de Pagina te openen.

de Informatie van de Pagina > Beleid van de Pagina

De categorieën wknd.dependencies en wknd.site worden hier weergegeven. Standaard worden clientlibs die via het paginabeleid zijn geconfigureerd, gesplitst om de CSS op te nemen in de paginakop en de JavaScript op het hoofdeinde. U kunt de clientlib-JavaScript die in de paginakop moet worden geladen expliciet weergeven. Dit geldt voor wknd.dependencies .

Navigeer aan LA Skateparks pagina die gebruikend het Malplaatje van de Pagina van het Artikel wordt gecreeerd: ​ http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html ​.

Klik het pictogram van de Informatie van de Pagina en in het menu uitgezocht Mening zoals Gepubliceerd om de artikelpagina buiten de Redacteur van AEM te openen.

Bekijk de bron van de Pagina van ​ http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled ​ en u zou de volgende clientlib verwijzingen in <head> moeten kunnen zien:

<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>

De clientlibs gebruiken het proxy /etc.clientlibs eindpunt. U zou ook moeten zien dat volgende clientlib bij de bodem van de pagina omvat:

...
<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>

Kopieer de paginabron van de LA het artikelpagina van het skatepark in ​ http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled ​.

Open uw IDE opnieuw. Plak de gekopieerde prijsverhoging van AEM in index.html in de {module 1} ui.frontend onder src/main/webpack/static.

Bewerk de gekopieerde prijsverhoging en verwijder om het even welke verwijzingen naar clientlib-plaats en clientlib-gebiedsdelen:

<!-- 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>

Verwijder deze referenties omdat de webpack-ontwikkelserver deze artefacten automatisch genereert.

Begin de webpack dev server van een nieuwe terminal door het volgende bevel van binnen de {module 0} in werking te stellen ui.frontend:

$ 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

Dit zou een nieuw browser venster in ​ http://localhost:8080/ ​ met statische prijsverhoging moeten openen.

Bewerk het bestand src/main/webpack/site/_variables.scss . Vervang de $text-color -regel door:

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

Sla de wijzigingen op.

U zou automatisch de veranderingen moeten zien die automatisch in browser op ​ http://localhost:8080 ​ worden weerspiegeld.

Controleer het /aem-guides-wknd.ui.frontend/webpack.dev.js -bestand. Dit bevat de webpack-configuratie die wordt gebruikt om de webpack-dev-server te starten. De paden /content en /etc.clientlibs worden doorgegeven vanuit een lokaal actieve instantie van AEM. Dit is hoe de beelden, en andere clientlibs (die niet door worden beheerd ui.frontend code) ter beschikking worden gesteld.

U kunt tegenhouden de webpack server van de bevellijn door CTRL+C te typen.