Klientbibliotek och arbetsflöde client-side-libraries

Kolla in grenen tutorial/client-side-libraries-start från GitHub

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

Distribuera kodbasen till en lokal AEM med dina Maven-kunskaper:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Om du använder VSCode eller någon annan IDE öppnas modulen ui.apps.

Expandera sökvägen /apps/wknd/clientlibs om du vill visa de klientlibs som har genererats av typen architype.

I avsnittet nedan finns mer information om dessa klientlibs.

I följande tabell sammanfattas klientbiblioteken. Mer information om inklusive klientbibliotek finns här.

Observera att clientlib-site och clientlib-dependencies ignoreras från källkontrollen. Detta är utformat eftersom dessa genereras vid byggtiden av modulen ui.frontend.

Öppna modulen ui.front och navigera till src/main/webpack/site.

Öppna filen main.scss

main.scss är startpunkten till Sass-filerna i modulen ui.frontend. Den innehåller filen _variables.scss, som innehåller en serie varumärkesvariabler som ska användas i olika Sass-filer i projektet. Filen _base.scss ingår också och definierar några grundläggande format för HTML-element. Ett reguljärt uttryck innehåller formaten för enskilda komponentformat under src/main/webpack/components. Ett annat reguljärt uttryck innehåller filerna under src/main/webpack/site/styles.

Inspect filen main.ts. Det innehåller main.scss och ett reguljärt uttryck för att samla in alla .js- eller .ts-filer i projektet. Den här startpunkten används av webbpaketets konfigurationsfiler som startpunkt för hela ui.frontend-modulen.

Inspect filerna under src/main/webpack/site/styles:

De här filerna formaterar för globala element i mallen, som sidhuvud, sidfot och behållare för huvudinnehåll. CSS-reglerna i de här filerna har olika HTML-element som mål header, main och footer. Dessa HTML-element definierades av principer i det föregående kapitlet Sidor och mallar.

Expandera mappen components under src/main/webpack och inspektera filerna.

Varje fil mappar till en kärnkomponent som dragspelskomponenten. Varje kärnkomponent byggs med Blockelementsmodifierare eller BEM-notation för att göra det enklare att rikta in specifika CSS-klasser med formatregler. Filerna under /components har grupperats ut av den AEM projekttypen med olika BEM-regler för varje komponent.

Hämta WKND-basformat wknd-base-styles-src-v3.zip och zip filen.

För att snabba upp självstudiekursen finns flera Sass-filer som implementerar WKND-varumärket baserat på kärnkomponenter och strukturen för artikelsidmallen.

Skriv över innehållet i ui.frontend/src med filer från föregående steg. Innehållet i zip-filen ska skriva över följande mappar:

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

Inspect de ändrade filerna för att se information om implementeringen av WKND-formatet.

Öppna en kommandoradsterminal och installera modulen ui.front med kommandot npm install:

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

Öppna ui.frontend/package.json och lägg till --env writeToDisk=true i kommandot scripts start.

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

Starta webbpaketets dev-server i läget watch genom att köra följande kommando:

$ npm run watch

Detta kompilerar källfilerna från modulen ui.frontend och synkroniserar ändringarna med AEM på 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

Kommandot npm run watch fyller i clientlib-site och clientlib-beroenden i modulen ui.apps som sedan synkroniseras automatiskt med AEM.

Inspect filen site.css under ui.frontend/dist/clientlib-site/site.css. Detta är den kompilerade CSS-koden som baseras på Sass-källfilerna.

Inspect filen ui.frontend/clientlib.config.js. Detta är konfigurationsfilen för ett npm-plugin-program, aem-clientlib-generator, som omformar innehållet i /dist till ett klientbibliotek och flyttar det till modulen ui.apps.

Inspect filen site.css i modulen ui.apps på ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Detta bör vara en identisk kopia av filen site.css från modulen ui.front. Nu när den finns i modulen ui.apps kan den distribueras till AEM.

Öppna LA Skatepark-artikeln i AEM: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Du bör nu se de uppdaterade formaten för artikeln. Du kan behöva göra en hård uppdatering för att rensa alla CSS-filer som har cachelagrats i webbläsaren.

Det börjar se mycket närmare på mockonerna!

Från öppnar modulen ui.frontend filen: ui.frontend/src/main/webpack/site/_variables.scss.

Uppdatera färgvariabeln $brand-primary:

//== variables.css

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

Spara ändringarna.

Återgå till webbläsaren och uppdatera AEM för att se uppdateringarna:

Återställ ändringen av färgen $brand-primary och stoppa webbpaketsbygget med kommandot CTRL+C.

Bläddra till mallen Artikelsida på http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Klicka på ikonen Sidinformation och välj Sidprofil på menyn för att öppna dialogrutan Sidprofil.

Sidinformation > Sidprofil

Observera att kategorierna för wknd.dependencies och wknd.site listas här. Som standard delas klienten som konfigurerats via sidprincipen upp så att CSS inkluderas i sidhuvudet och JavaScript i brödtexten. Du kan visa en explicit lista över det clientlib JavaScript som ska läsas in i sidhuvudet. Detta gäller wknd.dependencies.

Navigera till sidan LA-skateparker som skapats med Artikelsidmallen: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Klicka på ikonen Sidinformation och välj Visa som publicerad på menyn för att öppna artikelsidan utanför AEM.

Visa sidkällan för http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled och du bör kunna se följande klientlibbreferenser i <head>:

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

Observera att klientlibs använder proxyslutpunkten /etc.clientlibs. Du bör också se att följande clientlib finns längst ned på sidan:

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

Kopiera sidkällan för LA-skatepararartikelsidan på http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Öppna din IDE igen. Klistra in den kopierade markeringen från AEM i index.html i modulen ui.front under src/main/webpack/static.

Redigera den kopierade koden och ta bort alla referenser till clientlib-site och clientlib-beroenden:

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

Ta bort dessa referenser eftersom webbpaketets dev-server automatiskt genererar dessa artefakter.

Starta webbpaketets dev-server från en ny terminal genom att köra följande kommando inifrån modulen ui.front:

$ 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

Då öppnas ett nytt webbläsarfönster på http://localhost:8080/ med statisk kod.

Redigera filen src/main/webpack/site/_variables.scss. Ersätt regeln $text-color med följande:

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

Spara ändringarna.

Ändringarna visas automatiskt i webbläsaren på http://localhost:8080.

Granska filen /aem-guides-wknd.ui.frontend/webpack.dev.js. Detta innehåller webbpaketskonfigurationen som används för att starta webbpack-dev-servern. Sökvägarna /content och /etc.clientlibs proxyservrar från en lokal instans av AEM som körs. Så här blir bilderna och andra klientlibs (som inte hanteras av koden ui.front ) tillgängliga.

Du kan stoppa webbpaketservern från kommandoraden genom att skriva CTRL+C.