L’Archetipo progetto AEM include un meccanismo di sviluppo front-end opzionale e dedicato basato su Webpack. Il modulo ui.frontend diventa così la posizione centrale per tutte le risorse front-end del progetto, inclusi i file JavaScript e CSS. Per sfruttare appieno questa funzione utile e flessibile, è importante comprendere in che modo lo sviluppo front-end si inserisce in un progetto AEM.
In termini molto semplificati, i progetti AEM si possono considerare costituiti da due parti distinte, ma correlate:
Poiché questi due processi di sviluppo si concentrano su parti diverse del progetto, lo sviluppo back-end e front-end può avvenire in parallelo.
Tuttavia, qualsiasi progetto risultante deve utilizzare l’output di entrambi i processi di sviluppo, sia back-end che front-end.
L’esecuzione del comando npm run dev
avvia il processo di sviluppo front-end che raccoglie i file JavaScript e CSS memorizzati nel modulo ui.frontend, genera due librerie client minimizzate o ClientLibs denominate clientlib-site
e clientlib-dependencies
e deposita il tutto nel modulo ui.apps. Le ClientLibs possono essere distribuite ad AEM e consentono di memorizzare il codice lato client nell’archivio.
Quando l’intero Archetipo progetto AEM viene eseguito utilizzando mvn clean install -PautoInstallPackage
, tutti gli artefatti del progetto, incluse le ClientLibs, vengono quindi inviati all’istanza di AEM.
Puoi avere ulteriori informazioni su come AEM gestisce le ClientLibs nella documentazione di sviluppo AEM, su come includerle oppure vedi di seguito come il modulo ui.frontend le utilizza.
Il modulo frontend è reso disponibile utilizzando una AEM ClientLib. Durante l’esecuzione dello script di sviluppo NPM, l’app viene sviluppata e il pacchetto aem-clientlib-generator prende il risultante output di sviluppo e lo trasforma in una ClientLib.
Una ClientLib è costituita dai file e dalle directory seguenti:
css/
: file CSS che possono essere richiesti nel codice HTMLcss.txt
: indica ad AEM l’ordine e i nomi dei file in css/
, in modo che possano essere unitijs/
: file JavaScript che possono essere richiesti nel codice HTMLjs.txt
indica ad AEM l’ordine e i nomi dei file in js/
, modo che possano essere unitiresources/
: Mappe sorgente, blocchi di codice non-entrypoint (derivanti dalla suddivisione del codice), risorse statiche (ad esempio icone), ecc.Il modulo di sviluppo front-end è uno strumento utile e molto flessibile, ma non c’è un’opinione prevalente su come dovrebbe essere utilizzato. Di seguito sono riportati due esempi di possibile utilizzo, ma le esigenze dei singoli progetti potrebbero sicuramente imporre altri modelli di utilizzo.
Utilizzando Webpack puoi creare stili e sviluppare in base all’output statico di pagine web AEM all’interno del modulo ui.frontend.
wcmmode=disabled
nell’URLnpm run dev
per generare le ClientLibsIn questo flusso, uno sviluppatore AEM potrebbe eseguire i passaggi uno e due e passare l’HTML statico allo sviluppatore front-end che sviluppa in base all’output HTML di AEM.
È inoltre possibile sfruttare la libreria dei componenti per acquisire campioni di output del markup di ciascun componente per lavorare a livello di componente anziché a livello di pagina.
Utilizzando Storybook puoi eseguire uno sviluppo front-end più atomico. Anche se Storybook non è incluso in Archetipo progetto AEM, puoi installarlo e memorizzare gli artefatti di Storybook nel modulo ui.frontend. Quando sono pronti per il test in AEM, possono essere distribuiti come ClientLibs eseguendo il comandonpm run dev
.
Storybook non è incluso in Archetipo progetto AEM. Se scegli di utilizzarlo, devi installarlo separatamente.
Qualunque sia il flusso di lavoro di sviluppo front-end che decidi di implementare per il progetto, gli sviluppatori back-end e gli sviluppatori front-end devono prima concordare il markup. In genere, è AEM che definisce il markup, fornito dai Componenti core. Tuttavia, il markup può essere personalizzato, se necessario.
L’Archetipo progetto AEM include un meccanismo opzionale di sviluppo front-end basato su Webpack con le seguenti funzionalità.
/clientlib/js
, /clientlib/css
o /clientlib/scss
.content.xml
o js.txt
/css.txt
, in quanto tutto viene eseguito tramite Webpack./component/
.
sites.js
e vendors.js
.site.js
e site.css
in /clientlib-site
nonché dependencies.js
e dependencies.css
in /clientlib-dependencies
Per ulteriori informazioni tecniche sul modulo ui.frontend, vedi la documentazione su GitHub.
npm install
.Per compilare la cartella ui.frontend, devi eseguire l’Archetipo con l’opzione -DoptionIncludeFrontendModule=y
.
I seguenti script NPM guidano il flusso di lavoro front-end:
npm run dev
: sviluppo completo con ottimizzazione JS disabilitata (tree shaking, ecc.), mappe sorgente abilitate e ottimizzazione CSS disabilitata.npm run prod
: sviluppo completo con ottimizzazione JS abilitata (tree shaking, ecc.), mappe sorgente disabilitate e ottimizzazione CSS abilitata.npm run start
: avvia un server di sviluppo Webpack statico per lo sviluppo locale con dipendenze minime da AEM.Il modulo ui.frontend compila il codice sotto la cartella ui.frontend/src
e restituisce i file CSS e JS compilati e tutte le risorse sotto una cartella denominata ui.frontend/dist
.
site.js
, site.css
e una cartellaresources/
per le immagini e i font dipendenti dal layout vengono creati in una cartella dist/
clientlib-site.dependencies.js
e dependencies.css
vengono creati in una cartella dist/clientlib-dependencies
.L’opzione di sviluppo front-end utilizza i file di configurazione Webpack dev-only e prod-only che condividono un file di configurazione comune. In questo modo le impostazioni di sviluppo e produzione possono essere modificate in modo indipendente.
Il processo di sviluppo del modulo ui.frontend sfrutta il plug-in aem-clientlib-generator per spostare i file CSS, JS compilati e tutte le risorse nel modulo ui.apps. La configurazione di aem-clientlib-generator è definita in clientlib.config.js
. Vengono generate le seguenti librerie client:
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
Le categorie clientlib-site
e clientlib-dependencies
vengono incluse nelle pagine tramite la configurazione di Criterio pagina come parte del modello predefinito. Per visualizzare il criterio, modifica Modello pagina di contenuto > Informazioni pagina > Criterio pagina.
L’inclusione finale delle librerie client nella pagina del sito è la seguente:
<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>
L’inclusione di cui sopra può ovviamente essere modificata aggiornando Criterio pagina e/o modificando le categorie e le proprietà di incorporamento delle rispettive librerie client.
Nel modulo ui.frontend è incluso un webpack-dev-server che fornisce un ricaricamento live per uno sviluppo front-end rapido al di fuori di AEM. La configurazione sfrutta html-webpack-plugin per inserire automaticamente i file CSS e JS compilati dal modulo ui.frontend in un modello HTML statico.
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
.mvn -PautoInstallSinglePackage clean install
per installare l’intero progetto su un’istanza di AEM in esecuzione su localhost:4502
.ui.frontend
.npm run start
per avviare il server di sviluppo Webpack. Una volta avviato, si dovrebbe aprire un browser (localhost:8080
o la successiva porta disponibile).Ora puoi modificare i file CSS, JS, SCSS e TS e vedere le modifiche immediatamente riflesse nel server di sviluppo Webpack.