Librerie client e flusso di lavoro 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

Distribuisci 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.

Espandi 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 sull’abilitazione degli endpoint GraphQL si trovano qui.

Notare che clientlib-site e clientlib-dependencies vengono ignorati dal controllo 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 in 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 è anche 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.

Esamina 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.

Esamina i file in 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 HTML sono stati definiti dai criteri del precedente capitolo Pagine e modelli.

Espandi la cartella components in src/main/webpack ed esamina 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 rendere più semplice destinare classi CSS specifiche con regole di stile. I file in /components sono stati eliminati da Archetipo progetto AEM con diverse regole BEM per ogni componente.

Scarica il file di Stili della linea base di WKND wknd-base-styles-src-v3.zip e decomprimilo.

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

Sovrascrivi 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.

Apri un terminale della riga di comando e installa 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 comando script inizio aggiungi --env writeToDisk=true.

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

Avvia il server di sviluppo webpack in modalità guadra eseguendo questo comando:

$ npm run watch

Compila i file di origine dal modulo ui.frontend e sincronizza le modifiche 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 clientlib-site e clientlib-dependencies nel modulo ui.apps, che viene quindi sincronizzato automaticamente con AEM.

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

Ispeziona 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.

Ispeziona 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.

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

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

Comincia ad assomigliare sempre più ai modelli!

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

Aggiornare la variabile di colore $brand-primary:

//== variables.css

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

Salvare le modifiche.

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

Ripristina la modifica al colore $brand-primary e arresta la generazione del webpack utilizzando il comando CTRL+C.

Passa al modello per la Pagina articolo all'indirizzo 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 clientlib 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>

Il 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.

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

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

Salvare le modifiche.

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

Salva 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.