Klientbibliotek och arbetsflöde

Senast uppdaterad: 14 juli 2024

Skapat för:

  • Nybörjare
  • Utvecklare

Lär dig hur bibliotek och klientbibliotek används för att distribuera och hantera CSS och JavaScript för en implementering av en Adobe Experience Manager (AEM) sajt. I den här självstudiekursen beskrivs även hur modulen ui.front, ett frikopplat webpack -projekt, kan integreras i hela byggprocessen.

Förutsättningar

Granska de verktyg och instruktioner som krävs för att konfigurera en lokal utvecklingsmiljö.

Vi rekommenderar även att du går igenom självstudiekursen Grundläggande om komponenter för att förstå grunderna i klientbibliotek och AEM.

Startprojekt

NOTE
Om du har slutfört det föregående kapitlet kan du återanvända projektet och hoppa över stegen för att checka ut startprojektet.

Ta en titt på den baslinjekod som självstudiekursen bygger på:

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

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

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

    $ mvn clean install -PautoInstallSinglePackage
    NOTE
    Om du använder AEM 6.5 eller 6.4 lägger du till profilen classic till eventuella Maven-kommandon.
    $ mvn clean install -PautoInstallSinglePackage -Pclassic

Du kan alltid visa den färdiga koden på GitHub eller checka ut koden lokalt genom att växla till grenen tutorial/client-side-libraries-solution.

Mål

  1. Förstå hur klientbibliotek inkluderas på en sida via en redigerbar mall.
  2. Lär dig hur du använder modulen ui.frontend och en webbpaketsutvecklingsserver för dedikerad frontendutveckling.
  3. Förstå hela arbetsflödet med att leverera kompilerad CSS och JavaScript till en webbplatsimplementering.

Vad du ska bygga

I det här kapitlet lägger du till några baslinjeformat för WKND-webbplatsen och artikelsidmallen för att få implementeringen närmare gränssnittets designmodeller. Du använder ett avancerat frontendarbetsflöde för att integrera ett webbpaketprojekt i ett AEM klientbibliotek.

Slutförda format

Artikelsida med baslinjeformat tillämpade

Bakgrund

Med bibliotek på klientsidan kan du ordna och hantera CSS- och JavaScript-filer som behövs för en AEM Sites-implementering. De grundläggande målen för klientbibliotek och klientbibliotek är:

  1. Lagra CSS/JS i små diskreta filer för enklare utveckling och underhåll
  2. Hantera beroenden av ramverk från tredje part på ett organiserat sätt
  3. Minimera antalet klientförfrågningar genom att sammanfoga CSS/JS till en eller två förfrågningar.

Mer information om hur du använder klientbibliotek finns här.

Bibliotek på klientsidan har vissa begränsningar. Det viktigaste är ett begränsat stöd för populära språk som Sass, LESS och TypeScript. I självstudiekursen ska vi titta på hur modulen ui.front kan hjälpa till att lösa det här.

Distribuera startkodsbasen till en lokal AEM och navigera till http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html. Den här sidan är inte formaterad. Låt oss implementera bibliotek på klientsidan för WKND-varumärket för att lägga till CSS och JavaScript på sidan.