Librerie client e workflow front-end client-side-libraries

Controlla il ramo tutorial/client-side-libraries-start da GitHub

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

Implementa la base di codice in un’istanza AEM locale utilizzando le abilità Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Utilizzando VSCode o un altro IDE, apri il modulo ui.apps.

Espandere il percorso /apps/wknd/clientlibs per visualizzare le clientlibs generate dall'archetipo.

Nella sezione seguente, queste clientlibs sono esaminate in maggiore dettaglio.

Nella tabella seguente sono riepilogate le librerie client. Ulteriori dettagli su incluse le librerie client sono disponibili qui.

Si noti che clientlib-site e clientlib-dependencies vengono ignorati dal controllo del codice sorgente. Questo è per progettazione, poiché questi sono generati in fase di build dal modulo ui.frontend.

Apri il modulo ui.frontend e passa a src/main/webpack/site.

Apri il file main.scss

main.scss è il punto di ingresso ai file Sass nel modulo ui.frontend. Include il file _variables.scss, che contiene una serie di variabili del brand da utilizzare nei diversi file Sass del progetto. Il file _base.scss è incluso e definisce alcuni stili di base per gli elementi HTML. Un'espressione regolare include gli stili dei singoli componenti in src/main/webpack/components. Un'altra espressione regolare include i file in src/main/webpack/site/styles.

Controllare il file main.ts. Include main.scss e un'espressione regolare per raccogliere qualsiasi file .js o .ts nel progetto. Questo punto di ingresso viene utilizzato dai file di configurazione Webpack come punto di ingresso per l'intero modulo ui.frontend.

Esaminare i file sotto src/main/webpack/site/styles:

Questi file contengono stili per gli elementi globali del modello, come il contenitore Intestazione, Piè di pagina e Contenuto principale. Le regole CSS in questi file hanno come destinazione diversi elementi HTML header, main e footer. Questi elementi di HTML sono stati definiti dai criteri del precedente capitolo Pagine e modelli.

Espandere la cartella components in src/main/webpack ed esaminare i file.

Ogni file è associato a un componente core come Componente Pannello a soffietto. Ogni Componente core è generato con Block Element Modifier o notazione BEM per semplificare il targeting di classi CSS specifiche con regole di stile. I file sotto /components sono stati sottoposti a stubb da Archetipo progetto AEM con diverse regole BEM per ogni componente.

Scarica il file WKND Base Styles wknd-base-styles-src-v3.zip e unzip.

Per accelerare l’esercitazione, vengono forniti diversi file Sass che implementano il brand WKND in base ai Componenti core e alla struttura del modello per pagina dell’articolo.

Sovrascrivere il contenuto di ui.frontend/src con i file del passaggio precedente. Il contenuto del file ZIP deve sovrascrivere le seguenti cartelle:

/src/main/webpack
         /components
         /resources
         /site
         /static

Ispeziona i file modificati per visualizzare i dettagli dell’implementazione dello stile WKND.

Aprire un terminale della riga di comando e installare il modulo ui.frontend utilizzando il comando npm install:

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

Apri ui.frontend/package.json e nel script start aggiungi il comando --env writeToDisk=true.

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

Avvia il server di sviluppo Webpack in modalità watch eseguendo il comando seguente:

$ npm run watch

In questo modo vengono compilati i file di origine dal modulo ui.frontend e le modifiche vengono sincronizzate con AEM in http://localhost:4502

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

Il comando npm run watch popola infine il clientlib-site e le clientlib-dependencies nel modulo ui.apps, che viene quindi sincronizzato automaticamente con AEM.

Controllare il file site.css sotto ui.frontend/dist/clientlib-site/site.css. Si tratta del CSS compilato basato sui file di origine Sass.

Controllare il file ui.frontend/clientlib.config.js. Questo è il file di configurazione per un plug-in npm, aem-clientlib-generator, che trasforma il contenuto di /dist in una libreria client e lo sposta nel modulo ui.apps.

Controllare il file site.css nel modulo ui.apps in ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Deve essere una copia identica del file site.css dal modulo ui.frontend. Ora che si trova nel modulo ui.apps, può essere distribuito ad AEM.

Apri l'articolo LA Skatepark in AEM all'indirizzo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Ora dovresti vedere gli stili aggiornati per l’articolo. Per cancellare i file CSS memorizzati nella cache dal browser potrebbe essere necessario eseguire un aggiornamento rapido.

Sta iniziando a sembrare molto più vicino ai modelli!

Dal modulo ui.frontend aprire il file: ui.frontend/src/main/webpack/site/_variables.scss.

Aggiorna la variabile di colore $brand-primary:

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

Salva le modifiche.

Torna al browser e aggiorna la pagina AEM per visualizzare gli aggiornamenti:

Ripristinare la modifica al colore $brand-primary e arrestare la compilazione del webpack utilizzando il comando CTRL+C.

Passa al modello per pagina articolo in http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Fai clic sull'icona Informazioni pagina e nel menu seleziona Criterio pagina per aprire la finestra di dialogo Criterio pagina.

Informazioni pagina > Criterio pagina

Le categorie per wknd.dependencies e wknd.site sono elencate qui. Per impostazione predefinita, le clientlibs configurate tramite Criterio pagina vengono suddivise in modo da includere il CSS nell’intestazione della pagina e il JavaScript alla fine del corpo. Puoi elencare esplicitamente la libreria client JavaScript da caricare nell’intestazione della pagina. Questo è il caso di wknd.dependencies.

Passa alla pagina La Skateparks creata utilizzando il modello pagina articolo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Fai clic sull'icona Informazioni pagina e nel menu seleziona Visualizza come pubblicato per aprire la pagina dell'articolo all'esterno dell'editor di AEM.

Visualizza l'origine Pagina di http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled e dovresti essere in grado di visualizzare i seguenti riferimenti clientlib in <head>:

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

Notare che clientlibs sta utilizzando l'endpoint proxy /etc.clientlibs. Dovresti inoltre notare che la seguente libreria client include nella parte inferiore della pagina:

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

Copia l'origine della pagina dell'articolo di skatepark LA all'indirizzo http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Riapri l’IDE. Incolla il markup copiato da AEM in index.html nel modulo ui.frontend sotto src/main/webpack/static.

Modifica il markup copiato e rimuovi eventuali riferimenti a clientlib-site e clientlib-dependencies:

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Rimuovi questi riferimenti perché il server di sviluppo Webpack genera automaticamente questi artefatti.

Avvia il server di sviluppo Webpack da un nuovo terminale eseguendo il comando seguente dal modulo ui.frontend:

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

Verrà aperta una nuova finestra del browser in http://localhost:8080/ con markup statico.

Modificare il file src/main/webpack/site/_variables.scss. Sostituire la regola $text-color con quanto segue:

- $text-color:              $black;
+ $text-color:              $pink;

Salva le modifiche.

Dovresti vedere automaticamente le modifiche riflesse nel browser su http://localhost:8080.

Esaminare il file /aem-guides-wknd.ui.frontend/webpack.dev.js. Contiene la configurazione del webpack utilizzata per avviare il webpack-dev-server. Esegue il proxy dei percorsi /content e /etc.clientlibs da un'istanza di AEM in esecuzione locale. In questo modo vengono rese disponibili le immagini e altre clientlibs (non gestite dal codice ui.frontend).

È possibile arrestare il server Webpack dalla riga di comando digitando CTRL+C.