Använda bibliotek på klientsidan i AEM as a Cloud Service using-client-side-libraries

Digitala upplevelser är till stor del beroende av bearbetning på klientsidan som styrs av komplex JavaScript- och CSS-kod. Med AEM-bibliotek (klientbibliotek) kan du ordna och centralt lagra dessa klientbibliotek i databasen. I kombination med front end-byggprocessen i AEM Project-arkitypenblir det enkelt att hantera din front end-kod för ditt AEM.

Fördelarna med att använda klienter i AEM är bland annat:

Clientlibs är den inbyggda lösningen för CSS och JavaScript från AEM.

Vad är klientbibliotek? what-are-clientlibs

Webbplatser kräver JavaScript och CSS samt statiska resurser som ikoner och webbteckensnitt för att kunna bearbetas på klientsidan. En klientlib AEM en mekanism för att referera (vid behov per kategori) och betjäna sådana resurser.

AEM samlar in webbplatsens CSS och JavaScript i en enda fil, på en central plats, för att säkerställa att endast en kopia av en resurs inkluderas i utdata från HTML. Detta maximerar effektiviteten vid leverans och gör att sådana resurser kan underhållas centralt i databasen via proxy, vilket skyddar åtkomsten.

Front-End Development for AEM as a Cloud Service fed-for-aemaacs

Alla JavaScript-, CSS- och andra frontresurser ska bevaras i modulen ui.front i AEM Project Archetype. Med den flexibla arkitekturen kan du använda dina moderna webbverktyg för att skapa och hantera de här resurserna.

Arketypen kan sedan kompilera resurserna till en enda CSS- och JS-fil, och bädda in dem automatiskt i en cq:clientLibraryFolder i databasen.

Mappstruktur för klientbibliotek clientlib-folders

En biblioteksmapp på klientsidan är en databasnod av typen cq:ClientLibraryFolder. Dess definition i CND-notation är

[cq:ClientLibraryFolder] > sling:Folder
  - dependencies (string) multiple
  - categories (string) multiple
  - embed (string) multiple
  - channels (string) multiple

Varje cq:ClientLibraryFolder fylls i med en uppsättning JS- och/eller CSS-filer, tillsammans med några stödfiler (se nedan). Viktiga egenskaper för cq:ClientLibraryFolder har konfigurerats enligt följande:

Om klientbiblioteksmappen innehåller en eller flera källfiler som sammanfogas till en enda JS- och/eller CSS-fil vid körning. Den genererade filens namn är nodnamnet med filnamnstillägget .js eller .css. Till exempel resulterar biblioteksnoden cq.jquery i den genererade filen cq.jquery.js eller cq.jquery.css.

Klientbiblioteksmappar innehåller följande objekt:

Skapar biblioteksmappar på klientsidan creating-clientlib-folders

Klientbibliotek måste finnas under /apps. Den här regeln är nödvändig för att kunna isolera kod från innehåll och konfiguration på ett bättre sätt.

En proxyserver används för att klientbiblioteken under /apps ska kunna nås. Åtkomstkontrollistorna används fortfarande i klientbiblioteksmappen, men med den kan innehållet läsas via /etc.clientlibs/ om egenskapen allowProxy är inställd på true.

Serverar bibliotek på klientsidan serving-clientlibs

När klientbiblioteksmappen har konfigurerats enligt behov kan dina klienter begäras via proxy. Exempel:

Med egenskapen allowProxy kan du begära:

Läser in klientbibliotek via HTML loading-via-htl

När dina klienter har lagrats och hanterats i klientbiblioteksmappen kan de nås via HTML.

Klientbibliotek läses in via en hjälpmall från AEM, som du kommer åt via data-sly-use. Hjälpmallar är tillgängliga i den här filen, som kan anropas via data-sly-call.

Varje hjälpmall förväntar sig ett categories-alternativ för att referera till de önskade klientbiblioteken. Det alternativet kan antingen vara en array med strängvärden eller en sträng som innehåller en kommaseparerad värdelista.

Mer information om hur du läser in klipp via HTML finns i dokumentationen för HTML.

Klientbibliotek på författare jämfört med Publish clientlibs-author-publish

De flesta klientlibs krävs i AEM publiceringsinstans. Det vill säga att de flesta kundens syften är att skapa en användarupplevelse av innehållet. För klientbibliotek på publiceringsinstanser kan klientbyggverktygen användas och distribueras via klientbiblioteksmappar enligt beskrivningen ovan.

Det finns dock tillfällen då klientbibliotek kan behövas för att anpassa redigeringsupplevelsen. Om du till exempel anpassar en dialogruta kan det krävas att du distribuerar små bitar av CSS eller JS till AEM.

Hantera klientbibliotek på författare clientlibs-on-author

Om du behöver använda klientbibliotek på författaren kan du skapa dina klientbibliotek under /apps med samma metoder som för publicering, men skriva det direkt under /apps/.../clientlibs/foo i stället för att skapa ett helt projekt för att hantera det.

Du kan sedan"koppla" till JS:t för redigering genom att lägga till dina klientbibliotek i en körklar klientbibliotekskategori.

Felsökningsverktyg debugging-tools

AEM innehåller flera verktyg för felsökning och testning av klientbiblioteksmappar.

Identifiera klientbibliotek discover-client-libraries

Komponenten /libs/cq/granite/components/dumplibs/dumplibs genererar en sida med information om alla klientbiblioteksmappar i systemet. Noden /libs/granite/ui/content/dumplibs har komponenten som en resurstyp. Om du vill öppna sidan använder du följande URL (ändra värd och port efter behov):

https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html

Informationen omfattar bibliotekets sökväg och typ (CSS eller JS) samt värdena för biblioteksattributen, t.ex. kategorier och beroenden. Efterföljande tabeller på sidan visar biblioteken i varje kategori och kanal.

Se genererade utdata see-generated-output

Komponenten dumplibs innehåller en testväljare som visar den källkod som genereras för ui:includeClientLib -taggar. Sidan innehåller kod för olika kombinationer av js-, css- och temaattribut.

Ytterligare funktioner i klientbiblioteksmappen additional-features

Det finns flera andra funktioner som stöds av klientbiblioteksmappar i AEM. Dessa krävs dock inte av AEM as a Cloud Service och därför bör de inte användas. De listas här för fullständighet.

Bibliotekshanteraren Adobe Granite HTML html-library-manager

Ytterligare inställningar för klientbibliotek kan styras via panelen Adobe Granite HTML Library Manager i systemkonsolen på https://<host>:<port>/system/console/configMgr).

Ytterligare mappegenskaper additional-folder-properties

Ytterligare mappegenskaper kan styra beroenden och inbäddningar, men behövs vanligtvis inte längre och användningen bör därför inte användas:

Länka till beroenden linking-to-dependencies

När koden i klientbiblioteksmappen refererar till andra bibliotek identifierar du de andra biblioteken som beroenden. Taggen ui:includeClientLib som refererar till din klientbiblioteksmapp gör att HTML-koden innehåller en länk till den biblioteksfil som genererats och beroendena.

Beroenden måste vara en annan cq:ClientLibraryFolder. Om du vill identifiera beroenden lägger du till en egenskap i noden cq:ClientLibraryFolder med följande attribut:

/etc/clientlibs/myclientlibs/publicmain är till exempel beroende av biblioteket cq.jquery. Sidan som refererar till huvudklientbiblioteket genererar HTML som innehåller följande kod:

<script src="/etc/clientlibs/foundation/cq.jquery.js" type="text/javascript">
<script src="/etc/clientlibs/mylibs/publicmain.js" type="text/javascript">

Bädda in kod från andra bibliotek embedding-code-from-other-libraries

Du kan bädda in kod från ett klientbibliotek i ett annat klientbibliotek. Vid körning innehåller de genererade JS- och CSS-filerna för inbäddningsbiblioteket koden för det inbäddade biblioteket.

Inbäddning av kod är användbart för att ge åtkomst till bibliotek som lagras i skyddade områden i databasen.

Appspecifika klientbiblioteksmappar app-specific-client-library-folders

Det är en god vana att behålla alla programrelaterade filer i programmappen under /apps. Det är också en god vana att neka åtkomst för webbplatsbesökare till mappen /apps. Om du vill följa båda de bästa metoderna skapar du en klientbiblioteksmapp under mappen /etc som bäddar in klientbiblioteket som är under /apps.

Använd egenskapen categories för att identifiera klientbiblioteksmappen som ska bäddas in. Om du vill bädda in biblioteket lägger du till en egenskap i noden cq:ClientLibraryFolder med följande egenskapsattribut:

Använda inbäddning för att minimera begäranden using-embedding-to-minimize-requests

I vissa fall kan du upptäcka att det sista HTML som genereras för den typiska sidan av publiceringsinstansen innehåller ett relativt stort antal <script> element.

I sådana fall kan det vara användbart att kombinera all nödvändig klientbibliotekskod till en enda fil så att antalet fram- och tillbaka-begäranden vid sidinläsning minskar. För att göra detta kan du embed de nödvändiga biblioteken i ditt programspecifika klientbibliotek med hjälp av inbäddningsegenskapen för noden cq:ClientLibraryFolder .

Sökvägar i CSS-filer paths-in-css-files

När du bäddar in CSS-filer använder den genererade CSS-koden sökvägar till resurser som är relativa till inbäddningsbiblioteket. Det offentligt tillgängliga biblioteket /etc/client/libraries/myclientlibs/publicmain bäddar till exempel in klientbiblioteket /apps/myapp/clientlib:

Filen main.css innehåller följande format:

body {
  padding: 0;
  margin: 0;
  background: url(images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

CSS-filen som genereras av noden publicmain innehåller följande format med den ursprungliga bildens URL:

body {
  padding: 0;
  margin: 0;
  background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

Se Inbäddade filer i utdata från HTML see-embedded-files

Om du vill spåra ursprunget för inbäddad kod eller se till att inbäddade klientbibliotek ger det förväntade resultatet, kan du se namnen på de filer som bäddas in under körning. Om du vill visa filnamnen lägger du till parametern debugClientLibs=true i webbsidans URL. Biblioteket som skapas innehåller @import programsatser i stället för den inbäddade koden.

I exemplet i det föregående avsnittet Embedding Code From Other Libraries bäddar klientbiblioteksmappen /etc/client/libraries/myclientlibs/publicmain in klientbiblioteksmappen /apps/myapp/clientlib . Om du lägger till parametern på webbsidan skapas följande länk i webbsidans källkod:

<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">

Om du öppnar filen publicmain.css visas följande kod:

@import url("/apps/myapp/clientlib/styles/main.css");

Använda preprocessorer using-preprocessors

AEM tillåter anslutningsbara preprocessorer och levereras med stöd för YUI Compressor för CSS och JavaScript och Google Closure Compiler (GCC) för JavaScript med YUI inställt som AEM standardpreprocessor.

De anslutningsbara preprocessorerna möjliggör flexibel användning, inklusive:

Användning usage

Du kan välja att konfigurera preprocessorer-konfigurationen per klientbibliotek eller system i hela systemet.

En preprocessorkonfiguration på klientlib-noden har företräde framför OSGI-konfigurationen.

Format och exempel format-and-examples

Format format

config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;

YUI-kompressor för CSS Minification och GCC för JS yui-compressor-for-css-minification-and-gcc-for-js

cssProcessor: ["default:none", "min:yui"]
jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]

Typescript to Preprocess and then GCC to Minify and Obfuscate typescript-to-preprocess-and-then-gcc-to-minify-and-obfuscate

jsProcessor: [
   "default:typescript",
   "min:typescript",
   "min:gcc;obfuscate=true"
]

Fler GCC-alternativ additional-gcc-options

failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")

Mer information om GCC-alternativ finns i GCC-dokumentation.

Ange systemstandardminiatyr set-system-default-minifier

YUI anges som standardminifierare i AEM. Följ de här stegen för att ändra detta till GCC.