Client-Side Libraries gebruiken op AEM as a Cloud Service using-client-side-libraries

Digitale ervaringen zijn sterk afhankelijk van verwerking op de client door complexe JavaScript- en CSS-code. AEM Client-Side Libraries (clientlibs) kunt u deze clientbibliotheken organiseren en centraal opslaan in de opslagplaats. Gekoppeld aan front-end bouwt proces in het AEM archetype van het Project, wordt het beheren van uw front-end code voor uw AEM project eenvoudig.

Tot de voordelen van het gebruik van clientlibs in AEM behoren:

Clientlibs zijn de ingebouwde oplossing voor het leveren van CSS en JavaScript van AEM.

Wat zijn clientbibliotheken? what-are-clientlibs

Voor sites moeten JavaScript- en CSS-bronnen en statische bronnen, zoals pictogrammen en weblettertypen, op de client worden verwerkt. Een clientlib AEM het mechanisme om (indien nodig per categorie) te verwijzen en dergelijke middelen te dienen.

AEM verzamelt de CSS en JavaScript van de site in één bestand, op een centrale locatie, om ervoor te zorgen dat er maar één kopie van een bron wordt opgenomen in de HTML-uitvoer. Hierdoor wordt de efficiëntie van de levering gemaximaliseerd en kunnen dergelijke bronnen centraal in de opslagplaats worden onderhouden via proxy, zodat de toegang veilig blijft.

Front-end ontwikkeling voor AEM as a Cloud Service fed-for-aemaacs

Alle JavaScript, CSS, en andere front-end activa zouden in de {🔗 moeten worden gehandhaafd module 0} ui.frontend van het Archetype van het Project van de AEM. Dankzij de flexibiliteit van het archetype kunt u uw moderne webgereedschappen gebruiken om deze bronnen te maken en te beheren.

Het archetype kan de bronnen vervolgens compileren in één CSS- en JS-bestand en deze automatisch insluiten in een cq:clientLibraryFolder in de opslagplaats.

Structuur van bibliotheekmap op de client clientlib-folders

Een bibliotheekmap op de client is een opslagplaats van het type cq:ClientLibraryFolder . Zijn definitie in aantekening CNDis

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

Elke cq:ClientLibraryFolder wordt gevuld met een set JS- en/of CSS-bestanden, samen met enkele ondersteunende bestanden (zie hieronder). Belangrijke eigenschappen van de cq:ClientLibraryFolder zijn als volgt geconfigureerd:

Als de map met clientbibliotheken een of meer bronbestanden bevat die tijdens runtime worden samengevoegd tot één JS- en/of CSS-bestand. De naam van het gegenereerde bestand is de knooppuntnaam met de bestandsnaamextensie .js of .css . Het bibliotheekknooppunt cq.jquery resulteert bijvoorbeeld in het gegenereerde bestand met de naam cq.jquery.js of cq.jquery.css .

Clientbibliotheekmappen bevatten de volgende items:

Clientzijbibliotheekmappen maken creating-clientlib-folders

Clientbibliotheken moeten zich onder /apps bevinden. Deze regel is nodig om code beter te isoleren van inhoud en configuratie.

De clientbibliotheken onder /apps zijn alleen toegankelijk als er een proxyserver wordt gebruikt. ACLs wordt nog afgedwongen op de omslag van de cliëntbibliotheek, maar servlet staat voor de inhoud toe om via /etc.clientlibs/ worden gelezen als het allowProxy bezit aan true wordt geplaatst.

Client-Side bibliotheken bedienen serving-clientlibs

Zodra uw omslag van de cliëntbibliotheek zoals vereistwordt gevormd, kunnen uw clientlibs via volmacht worden gevraagd. Als voorbeeld:

Met de eigenschap allowProxy kunt u het volgende aanvragen:

Clientbibliotheken laden via HTML loading-via-htl

Zodra uw clientbibliotheken zijn opgeslagen en beheerd in hun clientbibliotheekmap, kunnen ze toegang krijgen via HTML.

Clientbibliotheken worden geladen via een helpersjabloon die door AEM wordt geboden en die toegankelijk is via data-sly-use . De hulpmalplaatjes zijn beschikbaar in dit dossier, dat door data-sly-call kan worden geroepen.

Elke hulpsjabloon verwacht een categories optie voor het verwijzen naar de gewenste clientbibliotheken. Deze optie kan ofwel een array van tekenreekswaarden zijn, ofwel een tekenreeks met een lijst met door komma's gescheiden waarden.

zie de documentatie HTMLvoor meer details bij het laden van clientlibs via HTML.

Client-bibliotheken op auteur versus Publish clientlibs-author-publish

De meeste clientlibs zijn vereist op de AEM-publicatie-instantie. Dat wil zeggen dat de meeste clientlibs-doeleinden de eindgebruikerservaring van de inhoud moeten opleveren. Voor clientlibs op publiceer instanties, front-end bouwt hulpmiddelenkan worden gebruikt en via omslagen van de cliëntbibliotheek zoals hierboven beschrevenworden opgesteld.

Er zijn echter momenten waarop clientbibliotheken nodig kunnen zijn om de ontwerpervaring aan te passen. Als u bijvoorbeeld een dialoogvenster aanpast, moet u mogelijk kleine CSS- of JS-bits implementeren in de AEM ontwerpinstantie.

Clientbibliotheken beheren op auteur clientlibs-on-author

Als u clientbibliotheken op de auteur wilt gebruiken, kunt u onder /apps uw clientbibliotheken maken met dezelfde methoden als voor publiceren, maar deze rechtstreeks onder /apps/.../clientlibs/foo schrijven in plaats van een geheel project te maken om het te beheren.

U kunt dan "haken"in auteursJS door uw cliëntbibliotheken aan een uit-van-de-doos categorie van de cliëntbibliotheek toe te voegen.

Foutopsporingsgereedschappen debugging-tools

AEM beschikt over verschillende gereedschappen voor foutopsporing en het testen van clientbibliotheekmappen.

Clientbibliotheken detecteren discover-client-libraries

De component /libs/cq/granite/components/dumplibs/dumplibs genereert een pagina met informatie over alle clientbibliotheekmappen op het systeem. Het knooppunt /libs/granite/ui/content/dumplibs heeft de component als een brontype. Als u de pagina wilt openen, gebruikt u de volgende URL (waarbij u de host en poort naar wens wijzigt):

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

Tot de gegevens behoren het bibliotheekpad en -type (CSS of JS) en de waarden van de bibliotheekkenmerken, zoals categorieën en afhankelijkheden. In de volgende tabellen op de pagina worden de bibliotheken in elke categorie en elk kanaal weergegeven.

Zie Gegenereerde uitvoer see-generated-output

De component dumplibs bevat een testkiezer die de broncode weergeeft die voor ui:includeClientLib -tags wordt gegenereerd. De pagina bevat code voor verschillende combinaties van js-, css- en themakenmerken.

Extra functies voor clientbibliotheekmappen additional-features

Er zijn verscheidene andere eigenschappen die door de omslagen van de cliëntbibliotheek in AEM worden gesteund. Deze zijn echter niet verplicht voor AEM as a Cloud Service en daarom wordt het gebruik ervan afgeraden. Zij worden hier vermeld voor volledigheid.

Adobe Granite HTML Library Manager html-library-manager

De extra montages van de cliëntbibliotheek kunnen door het Adobe Granite Manager van de Bibliotheek van de HTML paneel van de Console van het Systeem bij https://<host>:<port>/system/console/configMgr worden gecontroleerd.

Extra mapeigenschappen additional-folder-properties

De extra omslageigenschappen omvatten staan controle van gebiedsdelen en bedden toe, maar zijn over het algemeen niet meer nodig en hun gebruik wordt ontmoedigd:

Koppeling naar afhankelijke instellingen linking-to-dependencies

Wanneer de code in de map met clientbibliotheken verwijst naar andere bibliotheken, identificeert u de andere bibliotheken als afhankelijkheden. De tag ui:includeClientLib die verwijst naar de map van de clientbibliotheek zorgt ervoor dat de HTML-code een koppeling bevat naar het gegenereerde bibliotheekbestand en de afhankelijkheden.

De afhankelijkheden moeten een andere cq:ClientLibraryFolder zijn. Om gebiedsdelen te identificeren, voeg een bezit aan uw cq:ClientLibraryFolder knoop met de volgende attributen toe:

De /etc/clientlibs/myclientlibs/publicmain is bijvoorbeeld afhankelijk van de cq.jquery -bibliotheek. De pagina die verwijst naar de hoofdclientbibliotheek genereert een HTML die de volgende code bevat:

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

Code van andere bibliotheken insluiten embedding-code-from-other-libraries

U kunt code van een clientbibliotheek insluiten in een andere clientbibliotheek. Tijdens de runtime bevatten de gegenereerde JS- en CSS-bestanden van de insluitingsbibliotheek de code van de ingesloten bibliotheek.

Het insluiten van code is handig voor het verschaffen van toegang tot bibliotheken die zijn opgeslagen in beveiligde gebieden van de opslagplaats.

Toepassingsspecifieke clientbibliotheekmappen app-specific-client-library-folders

U kunt het beste alle toepassingsgerelateerde bestanden in hun toepassingsmap onder /apps houden. Het wordt ook aanbevolen bezoekers van websites toegang tot de map /apps te weigeren. Voor beide aanbevolen procedures maakt u een clientbibliotheekmap onder de map /etc die de clientbibliotheek onder /apps insluit.

Gebruik de eigenschap Categorieën om de clientbibliotheekmap te identificeren die u wilt insluiten. Als u de bibliotheek wilt insluiten, voegt u een eigenschap toe aan het insluitingsknooppunt cq:ClientLibraryFolder en gebruikt u de volgende eigenschapkenmerken:

Insluiten gebruiken om verzoeken te minimaliseren using-embedding-to-minimize-requests

In sommige gevallen zult u zien dat de uiteindelijke HTML die door uw publicatieexemplaar wordt gegenereerd voor een standaardpagina, een relatief groot aantal <script> -elementen bevat.

In dergelijke gevallen kan het handig zijn om alle vereiste code van de clientbibliotheek te combineren in één bestand, zodat het aantal heen en weer aanvragen bij het laden van de pagina wordt verminderd. Hiervoor kunt u embed de vereiste bibliotheken in uw toepassingsspecifieke clientbibliotheek plaatsen met de eigenschap embed van het knooppunt cq:ClientLibraryFolder .

Paden in CSS-bestanden paths-in-css-files

Wanneer u CSS-bestanden insluit, gebruikt de gegenereerde CSS-code paden naar bronnen die relatief zijn ten opzichte van de insluitingsbibliotheek. De openbaar toegankelijke bibliotheek /etc/client/libraries/myclientlibs/publicmain sluit bijvoorbeeld de /apps/myapp/clientlib -clientbibliotheek in:

Het bestand main.css bevat de volgende stijl:

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

Het CSS-bestand dat de node publicmain genereert, bevat de volgende stijl met behulp van de URL van de oorspronkelijke afbeelding:

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

Zie Ingesloten bestanden in HTML-uitvoer see-embedded-files

Als u de oorsprong van ingesloten code wilt traceren of wilt controleren of ingesloten clientbibliotheken de verwachte resultaten opleveren, kunt u de namen zien van de bestanden die bij uitvoering worden ingesloten. Als u de bestandsnamen wilt zien, voegt u de parameter debugClientLibs=true toe aan de URL van de webpagina. De gegenereerde bibliotheek bevat @import -instructies in plaats van de ingesloten code.

In het voorbeeld in het vorige Inbedden Code van Andere Bibliothekensectie, sluit de /etc/client/libraries/myclientlibs/publicmain omslag van de cliëntbibliotheek de /apps/myapp/clientlib omslag van de cliëntbibliotheek in. Als u de parameter aan de webpagina toevoegt, wordt de volgende koppeling in de broncode van de webpagina gemaakt:

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

Wanneer u het publicmain.css -bestand opent, wordt de volgende code weergegeven:

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

Voorprocessors gebruiken using-preprocessors

AEM staat voor pluggable preprocessoren en schepen met steun voor Compressor YUIvoor CSS en JavaScript toe en de Compiler van de Sluiting van Google (GCC)voor JavaScript met YUI die als AEM standaard preprocessor wordt geplaatst.

Met de aanpasbare voorprocessoren kunt u flexibel gebruik maken, waaronder:

Gebruik usage

U kunt kiezen om de configuratie van preprocessoren per clientbibliotheek of systeembreed te configureren.

Een preprocessorconfiguratie op de clientlib knoop neemt belangrijkheid over de configuratie OSGI.

Indeling en voorbeelden format-and-examples

Indeling format

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

YUI-compressor voor CSS-miniatuur en GCC voor JS yui-compressor-for-css-minification-and-gcc-for-js

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

Typescript aan preprocess en dan GCC om te kleven en te verduisteren typescript-to-preprocess-and-then-gcc-to-minify-and-obfuscate

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

Aanvullende GCC-opties additional-gcc-options

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

Voor meer details op opties GCC, zie {de documentatie van 0} GCC 🔗.

Systeemstandaardminiatuur instellen set-system-default-minifier

YUI wordt geplaatst als standaardminifier in AEM. Voer de volgende stappen uit om dit te wijzigen in GCC.