ui.frontModule för AEM Project Archetype

AEM Project Archetype innehåller en dedikerad front-end-konstruktionsmekanism som bygger på WebPack som tillval. Modulen ui.front blir alltså den centrala platsen för alla projektets frontresurser, inklusive JavaScript- och CSS-filer. För att till fullo kunna utnyttja denna användbara och flexibla funktion är det viktigt att förstå hur frontendutvecklingen passar in i ett AEM projekt.

AEM och frontendutvecklingsprojekt

I betydligt förenklade termer kan man tänka sig att AEM projekt består av två separata men sammanhörande delar:

• Bakgrundsutveckling som driver logiken i AEM och skapar Java-bibliotek, OSGi-tjänster osv.
• Framtidsutveckling som driver presentationen och beteendet på den slutliga webbplatsen och skapar JavaScript- och CSS-bibliotek

Eftersom dessa två utvecklingsprocesser är inriktade på olika delar av projektet kan både back-end och front-end-utveckling ske parallellt.

Alla resulterande projekt måste dock använda resultatet från båda dessa utvecklingssatsningar, dvs. både back end och front end.

Körs npm run dev startar frontendkonstruktionsprocessen som samlar JavaScript- och CSS-filer som lagras i modulen ui.front och skapar två minifierade klientbibliotek eller ClientLibs som anropas clientlib-site och clientlib-dependencies och placerar dem i modulen ui.apps. ClientLibs kan distribueras för att AEM och tillåta dig att lagra din klientkod i databasen.

När hela AEM projekttyp körs med mvn clean install -PautoInstallPackage alla projektartefakter inklusive ClientLibs skickas sedan till AEM.

ClientLibs Overview

Framtöjningsmodulen är tillgänglig med en AEM ClientLib. När NPM-byggskriptet körs skapas appen och paketet aem-clientlib-generator tar det resulterande byggresultatet och omvandlar det till en sådan ClientLib.

En ClientLib består av följande filer och kataloger:

• css/: CSS-filer som kan begäras i HTML
• css.txt: AEM ordning och namn på filer i css/ så att de kan sammanfogas
• js/: JavaScript-filer som kan begäras i HTML
• js.txt AEM ordning och namn på filer i js/ så att de kan sammanfogas
• resources/: Källmappningar, kodsegment som inte är ingångspunkter (till följd av koddelning), statiska resurser (t.ex. ikoner) osv.

Möjliga arbetsflöden för utveckling i gränssnittet

Framtidsmodulen är ett användbart och mycket flexibelt verktyg, men har ingen särskild åsikt om hur den ska användas. Följande är två exempel på möjligt -användning, men dina individuella projektbehov kan påverka andra användningsmodeller.

Använda Statisk utvecklingsserver för Webpack

Med Webpack kan du utforma och utveckla baserat på statiska utdata från AEM webbsidor i modulen ui.front.

1. Förhandsgranska sida i AEM med förhandsgranskningsläge eller skicka i wcmmode=disabled i URL:en
2. Visa sidkällan och spara som statisk HTML i modulen ui.front
3. Starta webbpaket och börja formatera och generera nödvändigt JavaScript och CSS
4. Kör npm run dev för att generera ClientLibs

I det här flödet kan en AEM utföra steg ett och två och skicka det statiska HTML vidare till den frontendutvecklare som utvecklar baserat på utdata från AEM HTML.

Använda Storybook

Använda Storybook kan du utföra mer atomiska framtagningsfunktioner. Även om Storybook inte ingår i AEM Project Archetype kan du installera den och lagra dina Storybook-artefakter i modulen ui.front. När de är klara för testning i AEM kan de distribueras som ClientLibs genom att köra npm run dev.

Bestämma markeringen

Oavsett vilket utvecklingsarbetsflöde ni bestämmer er för att implementera för projektet måste backend-utvecklarna och front end-utvecklarna först komma överens om koden. AEM definierar vanligtvis koden, som tillhandahålls av kärnkomponenterna. Detta kan dock anpassas vid behov.

Modulen ui.front

AEM Project Archetype innehåller en dedikerad front-end-konstruktionsmekanism som är baserad på Webpack med följande funktioner.

• Fullt stöd för TypeScript, ES6 och ES5 (med tillämpliga Webpack-wrappers)
• TypeScript- och JavaScript-linting med en TSLint-regeluppsättning
• ES5-utdata, för äldre webbläsare
• Globbing
  • Du behöver inte lägga till import överallt
  • Alla JS- och CSS-filer kan nu läggas till i varje komponent.
    • Bästa praxis är under /clientlib/js, /clientlib/css, eller /clientlib/scss
  • Nej .content.xml eller js.txt/css.txt filer behövs när allt körs via Webpack.
  • Globen hämtar alla JS-filer under /component/ mapp.
    • Med Webpack kan CSS-/SCSS-filer kedjas i via JS-filer.
    • De dras in genom de två ingångspunkterna, sites.js och vendors.js.
  • Den enda fil som AEM använder är utdatafilerna site.js och site.css in /clientlib-site och dependencies.js och dependencies.css in /clientlib-dependencies
• Chunks
  • Huvudsida (webbplatsjs/css)
  • Leverantörer (beroenden js/css)
• Fullt stöd för Sass/Scss (Sass kompileras till CSS via Webpack)
• Statisk webbpaketsutvecklingsserver med inbyggd proxy till en lokal instans av AEM

Installation

1. Installera NodeJS (v10+), globalt. Detta installerar även npm.
2. Navigera till ui.front i ditt projekt och kör npm install.

Användning

Följande nPM-skript driver arbetsflödet framåt:

• npm run dev - fullständigt bygge med JS-optimering inaktiverad (trädskakning osv.) och källmappningar aktiverade och CSS-optimering inaktiverad.
• npm run prod - fullständigt bygge med JS-optimering aktiverad (trädskakning osv.), källmappningar inaktiverade och CSS-optimering aktiverad.
• npm run start - Startar en statisk webbpaketsutvecklingsserver för lokal utveckling med minimalt AEM.

Utdata

Modulen ui.front kompilerar koden under ui.frontend/src och matar ut kompilerad CSS och JS samt eventuella resurser under en mapp med namnet ui.frontend/dist.

• Plats - site.js, site.css och resources/ mapp för layoutberoende bilder och teckensnitt skapas i en dist/mapp för clientlib-plats.
• Beroenden - dependencies.js och dependencies.css skapas i en dist/clientlib-dependencies mapp.

JavaScript

• Optimering - För produktionsbyggen tas alla JS som inte används eller anropas bort.

CSS

• Automatisk korrigering - Alla CSS körs via ett prefix och alla egenskaper som kräver prefix läggs automatiskt till i CSS.
• Optimering - I efterhand körs all CSS via en optimerare (cssnano) som normaliserar den enligt följande standardregler:
  • Minskar CSS-beräkningsuttrycket där det är möjligt, vilket säkerställer både webbläsarkompatibilitet och komprimering Konverterar mellan likvärdiga värden för längd, tid och vinkel. Observera att längdvärden som standard inte konverteras.
  • Tar bort kommentarer i och runt regler, väljare och deklarationer
  • Tar bort dubblerade regler, regler och deklarationer
    • Observera att detta bara fungerar för exakta dubbletter.
  • Tar bort tomma regler, mediefrågor och regler med tomma väljare eftersom de inte påverkar utdata
  • Sammanfogar intilliggande regler efter väljare och överlappande egenskaps-/värdepar
  • Ser till att det bara finns en enda @charset i CSS-filen och flyttar den högst upp i dokumentet
  • Ersätter det inledande CSS-nyckelordet med det faktiska värdet när resultatet blir mindre
  • Komprimerar textbundna SVG-definitioner med SVGO
• Rensning - Innehåller explicit rensning av CSS-, JS- och Map-filer vid behov.
• Källmappning - endast utvecklingsbygge

Generering av klientbibliotek

Ui.front-modulens byggprocess utnyttjar aem-clientlib-generator plugin-program för att flytta kompilerad CSS, JS och eventuella resurser till modulen ui.apps. Konfigurationen för aem-clientlib-generator definieras i clientlib.config.js. Följande klientbibliotek genereras:

• clientlib-site - ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
• clientlib-beroenden - ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies

Inkludera klientbibliotek på sidor

clientlib-site och clientlib-dependencies kategorierna inkluderas på sidorna via Konfiguration av sidprofil som en del av standardmallen. Om du vill visa profilen redigerar du Innehållssidmall > Sidinformation > Sidprofil.

Klientbibliotek på webbplatssidan inkluderas slutligen på följande sätt:

<HTML>
    <head>
        <link rel="stylesheet" href="clientlib-base.css" type="text/css">
        <script type="text/javascript" src="clientlib-dependencies.js"></script>
        <link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
        <link rel="stylesheet" href="clientlib-site.css" type="text/css">
    </head>
    <body>
        ....
        <script type="text/javascript" src="clientlib-site.js"></script>
        <script type="text/javascript" src="clientlib-base.js"></script>
    </body>
</HTML>

Ovanstående tillägg kan förstås ändras genom att man uppdaterar sidprofilen och/eller ändrar kategorierna och inbäddningsegenskaperna för respektive klientbibliotek.

Statisk webbpaketsutvecklingsserver

I modulen ui.front ingår en webpack-dev-server som tillhandahåller direktladdning för snabb frontutveckling utanför AEM. Installationen utnyttjar pluginmodulen html-webpack-plugin för att automatiskt mata in CSS och JS som kompilerats från modulen ui.front i en statisk HTML-mall.

Viktiga filer

• ui.frontend/webpack.dev.js
  • Detta innehåller konfigurationen för webbpack-dev-server och pekar på html-mallen som ska användas.
  • Den innehåller också en proxykonfiguration för en AEM som körs på localhost:4502.
• ui.frontend/src/main/webpack/static/index.html
  • Det här är det statiska HTML som servern ska köras mot.
  • På så sätt kan utvecklare göra CSS-/JS-ändringar och omedelbart se hur de återspeglas i koden.
  • Det antas att koden som placeras i den här filen korrekt återger den kod som genereras AEM komponenterna.
  • Markeringar i den här filen synkroniseras inte automatiskt med AEM komponentkod.
  • Den här filen innehåller även referenser till klientbibliotek som lagras i AEM, som CSS för kärnkomponent och CSS för responsivt stödraster.
  • Webbpaketets utvecklingsserver är konfigurerad för att proxyservern för dessa CSS/JS-inkluderingar från en lokal AEM som körs baserat på konfigurationen som finns i ui.frontend/webpack.dev.js.

Använda

1. Kör kommandot inifrån projektets rot mvn -PautoInstallSinglePackage clean install för att installera hela projektet i en AEM som körs på localhost:4502.
2. Navigera inuti ui.frontend mapp.
3. Kör följande kommando npm run start för att starta webbpaketets dev-server. När programmet har startats bör det öppna en webbläsare (localhost:8080 eller nästa tillgängliga port).

Nu kan du ändra CSS-, JS-, SCSS- och TS-filer och se ändringarna direkt på webbpaketets dev-server.

Resurser för Business.Adobe.com