Bibliotecas de cliente y flujo de trabajo front-end client-side-libraries

Consulte la rama tutorial/client-side-libraries-start de GitHub

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

Implemente una base de código en una instancia de AEM local con sus habilidades con Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Si usa VSCode u otro IDE, abra el módulo ui.apps.

Expanda la ruta /apps/wknd/clientlibs para ver los clientlibs generados por el tipo de archivo.

En la sección siguiente, estos clientlibs se revisan con más detalle.

La siguiente tabla resume las bibliotecas de cliente. Encontrará más detalles sobre incluidas las bibliotecas de clientes aquí.

Observe que clientlib-site y clientlib-dependencies se omiten desde el control de código fuente. Esto es por diseño, ya que se generan en tiempo de compilación por el módulo ui.frontend.

Abra el módulo ui.frontend y vaya a src/main/webpack/site.

Abrir el archivo main.scss

main.scss es el punto de entrada a los archivos Sass en el módulo ui.frontend. Incluye el archivo _variables.scss, que contiene una serie de variables de marca que se utilizarán en distintos archivos Sass del proyecto. El archivo _base.scss también se incluye y define algunos estilos básicos para los elementos de HTML. Una expresión regular incluye los estilos para los estilos de componentes individuales en src/main/webpack/components. Otra expresión regular incluye los archivos bajo src/main/webpack/site/styles.

Inspeccione el archivo main.ts. Incluye main.scss y una expresión regular para recopilar cualquier archivo de .js o .ts en el proyecto. Los archivos de configuración del Webpack utilizan este punto de entrada como punto de entrada para todo el módulo ui.frontend.

Inspeccione los archivos por debajo de src/main/webpack/site/styles:

Estos archivos contienen estilos para elementos globales de la plantilla, como el encabezado, el pie de página y el contenedor de contenido principal. Las reglas CSS de estos archivos se dirigen a diferentes elementos de HTML header, main y footer. Estos elementos de HTML fueron definidos por directivas del capítulo anterior Páginas y plantillas.

Expanda la carpeta components en src/main/webpack e inspeccione los archivos.

Cada archivo se asigna a un componente principal como el componente de acordeón. Cada componente principal se crea con la notación Modificador de elemento de bloque o BEM para facilitar la segmentación de clases CSS específicas con reglas de estilo. El tipo de archivo del proyecto de AEM ha tachado los archivos situados debajo de /components con las distintas reglas de BEM para cada componente.

Descargue los estilos base de WKND wknd-base-styles-src-v3.zip y descomprima el archivo.

Para acelerar el tutorial, se proporcionan varios archivos Sass que implementan la marca WKND en función de los componentes principales y la estructura de la plantilla de página de artículo.

Sobrescribir el contenido de ui.frontend/src con archivos del paso anterior. El contenido del zip debe sobrescribir las siguientes carpetas:

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

Inspeccione los archivos modificados para ver los detalles de la implementación de estilo WKND.

Abra un terminal de línea de comandos e instale el módulo ui.frontend con el comando npm install:

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

Abra ui.frontend/package.json y en el comando scripts start agregue --env writeToDisk=true.

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

Inicie el servidor de desarrollo de Webpack en modo watch ejecutando el siguiente comando:

$ npm run watch

Esto compila los archivos de origen del módulo ui.frontend y sincroniza los cambios con AEM en 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

El comando npm run watch rellena finalmente clientlib-site y clientlib-dependencies en el módulo ui.apps, que luego se sincroniza automáticamente con AEM.

Inspeccione el archivo site.css debajo de ui.frontend/dist/clientlib-site/site.css. Este es el CSS compilado basado en los archivos fuente Sass.

Inspeccione el archivo ui.frontend/clientlib.config.js. Este es el archivo de configuración para un complemento npm, aem-clientlib-generator, que transforma el contenido de /dist en una biblioteca de cliente y la mueve al módulo ui.apps.

Inspeccione el archivo site.css en el módulo ui.apps en ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Debe ser una copia idéntica del archivo site.css del módulo ui.frontend. Ahora que está en el módulo ui.apps, se puede implementar en AEM.

Abra el artículo de LA Skatepark en AEM en: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Ahora debería ver los estilos actualizados para el artículo. Es posible que tenga que realizar una actualización brusca para borrar cualquier archivo CSS almacenado en caché por el explorador.

¡Está empezando a mirar mucho más cerca de las maquetas!

En, el módulo ui.frontend abre el archivo: ui.frontend/src/main/webpack/site/_variables.scss.

Actualizar la variable de color $brand-primary:

//== variables.css

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

Guarde los cambios.

Vuelva al explorador y actualice la página de AEM para ver las actualizaciones:

Revierta el cambio al color $brand-primary y detenga la compilación del Webpack usando el comando CTRL+C.

Vaya a la plantilla de la página de artículos en http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Haga clic en el icono Información de la página y, en el menú, seleccione Política de la página para abrir el cuadro de diálogo Política de la página.

Información de página > Directiva de página

Observe que las categorías de wknd.dependencies y wknd.site se muestran aquí. De forma predeterminada, los clientlibs configurados mediante la directiva de página se dividen para incluir el CSS en el encabezado de la página y el JavaScript en el final del cuerpo. Puede enumerar explícitamente la JavaScript clientlib que se cargará en el encabezado de la página. Este es el caso de wknd.dependencies.

Vaya a la página de LA Skateparks creada con la plantilla de página de artículo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Haga clic en el icono Información de la página y, en el menú, seleccione Ver como publicado para abrir la página del artículo fuera del Editor de AEM.

Vea el origen de página de http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled y debería poder ver las siguientes referencias clientlib en <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>

Observe que los clientlibs están usando el extremo del proxy /etc.clientlibs. También debe ver que la siguiente clientlib incluye en la parte inferior de la página:

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

Copie el origen de página de la página de artículos del parque de patinaje LA en http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Vuelva a abrir el IDE. Pegue el marcado copiado de AEM en index.html, en el módulo ui.frontend debajo de src/main/webpack/static.

Edite el marcado copiado y quite cualquier referencia a clientlib-site y 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>

Elimine estas referencias porque el servidor de desarrollo de Webpack genera estos artefactos automáticamente.

Inicie el servidor de desarrollo de Webpack desde un nuevo terminal ejecutando el siguiente comando desde el módulo 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

Esto debería abrir una nueva ventana del explorador en http://localhost:8080/ con marcado estático.

Edite el archivo src/main/webpack/site/_variables.scss. Reemplace la regla $text-color con lo siguiente:

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

Guarde los cambios.

Debería ver automáticamente los cambios que se reflejan automáticamente en el explorador en http://localhost:8080.

Revise el archivo /aem-guides-wknd.ui.frontend/webpack.dev.js. Contiene la configuración del Webpack utilizada para iniciar el webpack-dev-server. Proporciona las rutas de acceso /content y /etc.clientlibs desde una instancia de AEM que se ejecuta localmente. Así es como están disponibles las imágenes y otros clientlibs (no administrados por el código ui.frontend).

Puede detener el servidor de Webpack desde la línea de comandos escribiendo CTRL+C.