Bibliotecas del lado del cliente y flujo de trabajo del front-end

Descubra cómo se utilizan las bibliotecas del lado del cliente o clientlibs para implementar y administrar CSS y Javascript para una implementación de Adobe Experience Manager (AEM) Sites. Este tutorial también tratará cómo el módulo ui.frontend, un proyecto webpack desacoplado, se puede integrar en el proceso de compilación de extremo a extremo.

Requisitos previos

Revise las herramientas e instrucciones necesarias para configurar un entorno de desarrollo local.

También se recomienda revisar el tutorial Conceptos básicos del componente para comprender los fundamentos de las bibliotecas y AEM del lado del cliente.

Proyecto de inicio

NOTA

Si ha completado correctamente el capítulo anterior, puede volver a utilizar el proyecto y omitir los pasos para extraer el proyecto de inicio.

Consulte el código de línea base sobre el que se basa el tutorial:

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

    $ cd aem-guides-wknd
    $ git checkout tutorial/client-side-libraries-start
    
  2. Implemente código base en una instancia de AEM local con sus habilidades con Maven:

    $ mvn clean install -PautoInstallSinglePackage
    
    NOTA

    Si utiliza AEM 6.5 o 6.4, anexe el perfil classic a cualquier comando Maven.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

Siempre puede ver el código terminado en GitHub o extraer el código localmente cambiando a la rama tutorial/client-side-libraries-solution.

Objetivos

  1. Comprender cómo se incluyen las bibliotecas del lado del cliente en una página a través de una plantilla editable.
  2. Aprenda a utilizar el módulo UI.Frontend y un servidor de desarrollo de webpack para el desarrollo de front-end dedicado.
  3. Comprenda el flujo de trabajo completo de entrega de CSS y JavaScript compilados a una implementación de Sites.

Qué va a generar

En este capítulo, agregará algunos estilos de línea de base para el sitio WKND y la plantilla de página de artículo en un esfuerzo por acercar la implementación a las maquetas de diseño de la interfaz de usuario. Utilizará un flujo de trabajo front-end avanzado para integrar un proyecto de webpack en una biblioteca de cliente AEM.

Estilos finalizados

Artículo Página con estilos de línea de base aplicados

Fondo

Las bibliotecas del lado del cliente proporcionan un mecanismo para organizar y administrar los archivos CSS y JavaScript necesarios para una implementación de AEM Sites. Los objetivos básicos para bibliotecas de cliente o clientlibs son:

  1. Almacene CSS/JS en pequeños archivos discretos para facilitar el desarrollo y el mantenimiento
  2. Administrar dependencias en marcos de terceros de forma organizada
  3. Minimice el número de solicitudes del lado del cliente concatenando CSS/JS en una o dos solicitudes.

Puede encontrar más información sobre el uso de bibliotecas del lado del cliente aquí.

Las bibliotecas del lado del cliente tienen algunas limitaciones. Lo más notable es que el soporte para los lenguajes front-end más populares, como Sass, LESS y TypeScript es limitado. En el tutorial veremos cómo el módulo ui.frontend puede ayudar a resolver esto.

Implemente el código de inicio en una instancia de AEM local y vaya a http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html. Esta página está actualmente sin estilo. A continuación, implementaremos bibliotecas del lado del cliente para la marca WKND para agregar CSS y Javascript a la página.

Organización de bibliotecas del lado del cliente

A continuación, exploraremos la organización de clientlibs generada por el AEM tipo de archivo del proyecto.

Organización clientlibrary de alto nivel

Diagrama de alto nivel Organización de biblioteca del lado del cliente e inclusión de página

NOTA

El siguiente tipo de archivo del proyecto genera la siguiente organización de biblioteca del lado del cliente, pero representa simplemente un punto de partida. La forma en que un proyecto gestiona y entrega CSS y Javascript a una implementación de Sites puede variar considerablemente en función de los recursos, los conjuntos de habilidades y los requisitos.

  1. Con VSCode u otro IDE, abra el módulo ui.apps.

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

    Clientlibs en ui.apps

    Inspeccionaremos estos clientlibs con buenos detalles a continuación.

  3. La siguiente tabla resume las bibliotecas de cliente. Puede encontrar más información sobre incluidas las bibliotecas de cliente aquí.

    Nombre Descripción Notas
    clientlib-base Nivel base de CSS y JavaScript necesarios para que el sitio WKND funcione incrusta las bibliotecas de cliente de los componentes principales
    clientlib-grid Genera el CSS necesario para que funcione Layout Mode. Los puntos de interrupción móviles/de Tablet se pueden configurar aquí
    clientlib-site Contiene un tema específico del sitio para el sitio WKND Generado por el módulo ui.frontend
    clientlib-dependencies Incrusta cualquier dependencia de terceros Generado por el módulo ui.frontend
  4. Observe que clientlib-site y clientlib-dependencies se ignoran desde el control de código fuente. Esto se hace por diseño, ya que el módulo ui.frontend los generará en el momento de la compilación.

Actualizar estilos base

A continuación, actualice los estilos base definidos en el módulo ui.frontend. Los archivos del módulo ui.frontend generarán las bibliotecas clientlib-site y clientlib-dependecies que contienen el tema del sitio y cualquier dependencia de terceros.

Las bibliotecas del lado del cliente tienen algunas limitaciones en cuanto a la compatibilidad con lenguajes como Sass o TypeScript. Existen varias herramientas de código abierto como NPM y webpack que aceleran y optimizan el desarrollo del front-end. El objetivo del módulo ui.frontend es poder utilizar estas herramientas para administrar la mayoría de los archivos de origen del front-end.

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

  2. Abra el archivo main.scss

    main.scss - entrypoint

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

    1. Inspect el archivo main.ts. Incluye main.scss y una expresión regular para recopilar cualquier archivo .js o .ts del proyecto. Este punto de entrada lo usará el webpack configuration files como punto de entrada para todo el módulo ui.frontend.
  3. Inspect los archivos debajo de src/main/webpack/site/styles:

    Archivos de estilo

    Estos archivos son estilos para elementos globales en 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 HTML header, main y footer. Estos elementos HTML se definieron mediante políticas en el capítulo anterior Páginas y plantillas.

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

    Archivos Sass de componentes

    Cada archivo se asigna a un componente principal como el componente 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. Los archivos situados debajo de /components han sido rellenados por el tipo de archivo del proyecto AEM con las diferentes reglas de BEM para cada componente.

  5. Descargue los estilos base WKND wknd-base-style-src.zip y descomprima el archivo.

    Estilos base de WKND

    Para acelerar el tutorial, hemos proporcionado 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ículos.

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

    /src/main/webpack
             /base
             /components
             /resources
    

    Archivos modificados

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

Inspect: integración de ui.frontend

Un elemento de integración clave integrado en el módulo ui.frontend, aem-clientlib-generator toma los artefactos CSS y JS compilados de un proyecto webpack/npm y los transforma en AEM bibliotecas del lado del cliente.

integración de la arquitectura ui.frontend

El tipo de archivo del proyecto AEM configura automáticamente esta integración. A continuación, explore cómo funciona.

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

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

    npm install solo debe ejecutarse una vez, después de un nuevo clon o generación del proyecto.

  2. En el mismo terminal, cree e implemente el módulo ui.frontend utilizando el comando npm run dev:

    $ npm run dev
    
    PRECAUCIÓN

    Puede recibir un error como "ERROR en ./src/main/webpack/site/main.scss".
    Esto suele ocurrir porque el entorno ha cambiado desde que se ejecutó npm install.
    Ejecute npm rebuild node-sass para solucionar el problema. Esto sucederá si la versión de npm instalada en el equipo de desarrollo local difiere de la versión utilizada por Maven frontend-maven-plugin en el archivo aem-guides-wknd/pom.xml. Puede arreglarlo de forma permanente modificando la versión en el archivo pom para que coincida con su versión local o viceversa.

  3. El comando npm run dev debe generar y compilar el código fuente para el proyecto Webpack y, en última instancia, rellenar el módulo clientlib-site y clientlib-dependencias en el módulo ui.apps.

    NOTA

    También hay un perfil npm run prod que minificará el JS y el CSS. Esta es la compilación estándar siempre que la compilación del webpack se activa mediante Maven. Puede encontrar más detalles sobre el módulo ui.frontend aquí.

  4. Inspect el archivo site.css debajo de ui.frontend/dist/clientlib-site/site.css. Esta es la CSS compilada basada en los archivos de origen de Sass.

    Distributed Site css

  5. Inspect 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 lo mueve al módulo ui.apps.

  6. Inspect 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 desde el módulo ui.frontend. Ahora que está en el módulo ui.apps, se puede implementar en AEM.

    ui.apps clientlib-site

    NOTA

    Dado que clientlib-site se compila durante el tiempo de compilación, utilizando npm o maven, se puede ignorar de forma segura desde el control de código fuente en el módulo ui.apps. Inspect el archivo .gitignore debajo de ui.apps.

  7. Sincronice la biblioteca clientlib-site con una instancia local de AEM mediante las herramientas para desarrolladores o las habilidades con Maven.

    Sincronizar sitio de Clientlib

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

    Estilos base actualizados para el artículo

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

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

    NOTA

    Los pasos realizados anteriormente para crear e implementar el código ui.frontend en AEM se ejecutan automáticamente cuando se activa una compilación de Maven desde la raíz del proyecto mvn clean install -PautoInstallSinglePackage.

PRECAUCIÓN

El uso del módulo ui.frontend puede no ser necesario para todos los proyectos. El módulo ui.frontend añade complejidad adicional y si no hay necesidad/deseo de utilizar algunas de estas herramientas avanzadas del front-end (Sass, webpack, npm…) puede que no sea necesario.

Inclusión de plantilla y página

A continuación, vamos a revisar cómo se hace referencia a clientlibs en la página AEM. Una práctica recomendada común en el desarrollo web es incluir CSS en el encabezado HTML <head> y JavaScript justo antes de cerrar la etiqueta </body>.

  1. En el módulo ui.apps vaya a ui.apps/src/main/content/jcr_root/apps/wknd/components/page.

    Componente de página de estructura

    Este es el componente page que se utiliza para procesar todas las páginas en la implementación de WKND.

  2. Abra el archivo customheaderlibs.html. Observe las líneas ${clientlib.css @ categories='wknd.base'}. Esto indica que el CSS para la clientlib con una categoría de wknd.base se incluirá a través de este archivo, incluyendo efectivamente clientlib-base en el encabezado de todas nuestras páginas.

  3. Actualice customheaderlibs.html para incluir una referencia a los estilos de fuente de Google que especificamos anteriormente en el módulo ui.frontend.

    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Asar&display=swap" rel="stylesheet">
    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.css @ categories='wknd.base'}"/>
    
    <!--/* Include Context Hub */-->
    <sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
    
  4. Inspect el archivo customfooterlibs.html. Este archivo, como customheaderlibs.html, está diseñado para sobrescribirse mediante la implementación de proyectos. Aquí, la línea ${clientlib.js @ categories='wknd.base'} significa que el JavaScript de clientlib-base se incluirá en la parte inferior de todas nuestras páginas.

  5. Exporte el componente page al servidor de AEM mediante las herramientas para desarrolladores o con sus habilidades con Maven.

  6. Vaya a la plantilla Página del artículo en http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

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

    Política de página del menú Plantilla de página de artículo

    Información de página > Política de página

  8. Observe que las categorías de wknd.dependencies y wknd.site se enumeran aquí. De forma predeterminada, los clientlibs configurados mediante la Política de página se dividen para incluir el CSS en el encabezado de página y el JavaScript en el final del cuerpo. Si lo desea, puede enumerar explícitamente que el JavaScript clientlib se debe cargar en el encabezado de la página. Este es el caso de wknd.dependencies.

    Política de página del menú Plantilla de página de artículo

    NOTA

    También es posible hacer referencia a wknd.site o wknd.dependencies desde el componente de página directamente, utilizando el script customheaderlibs.html o customfooterlibs.html, como se vio anteriormente para la clientlib wknd.base. El uso de la plantilla le da cierta flexibilidad en cuanto a que puede elegir qué clientlibs se utilizan por plantilla. Por ejemplo, si tiene una biblioteca JavaScript muy pesada que solo se va a usar en una plantilla seleccionada.

  9. Vaya a la página 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. Debería ver una diferencia en las fuentes.

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

    Ver como aparece publicado

  11. Vea la fuente 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>
    ...
    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Asar&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-base.min.css" type="text/css">
    <script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.min.js"></script>
    <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.min.css" type="text/css">
    ...
    </head>
    

    Observe que clientlibs utiliza el punto final /etc.clientlibs del proxy. También debería ver las siguientes clientlib incluidas en la parte inferior de la página:

    ...
    <script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-base.min.js"></script>
    ...
    </body>
    
    NOTA

    Si sigue a la versión 6.5/6.4, las bibliotecas del lado del cliente no se minificarán automáticamente. Consulte la documentación del Administrador de bibliotecas HTML para habilitar la minimización (recomendado).

    ADVERTENCIA

    Es fundamental en el lado de publicación que las bibliotecas de cliente no se proporcionen desde /apps, ya que esta ruta debe restringirse por motivos de seguridad utilizando la sección Filtro de Dispatcher. La allowProxy property de la biblioteca del cliente garantiza que el CSS y el JS se proporcionen desde /etc.clientlibs.

Servidor de desarrollo de Webpack: marcado estático

En el par anterior de ejercicios, pudimos actualizar varios archivos Sass en el módulo ui.frontend y a través de un proceso de compilación, finalmente ver estos cambios reflejados en AEM. A continuación, analizaremos las técnicas que utilizan un webpack-dev-server para desarrollar rápidamente nuestros estilos front-end frente al HTML static.

Esta técnica es útil si la mayoría de los estilos y el código front-end lo realiza un desarrollador de Front-End dedicado que puede no tener acceso fácil a un entorno AEM. Esta técnica también permite a la FED realizar modificaciones directamente en el HTML, que luego se puede transferir a un desarrollador AEM para que lo implemente como componentes.

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

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

  3. Edite el marcado copiado y elimine todas las referencias a clientlib-site y clientlib-dependencias:

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

    Podemos eliminar esas referencias porque el servidor de desarrollo de webpack generará estos artefactos automáticamente.

  4. 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
    
  5. Esto debería abrir una nueva ventana del explorador en http://localhost:8080/ con marcado estático.

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

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

    Guarde los cambios.

  7. Debería ver automáticamente los cambios reflejados automáticamente en el explorador en http://localhost:8080.

    Cambios en el servidor de desarrollo de webpack local

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

    PRECAUCIÓN

    La imagen src del marcado estático apunta a un componente de imagen en vivo en una instancia de AEM local. Las imágenes aparecerán rotas si la ruta a la imagen cambia, si no AEM se inicia o si el explorador no ha iniciado sesión en la instancia de AEM local. Si se entrega a un recurso externo, también es posible reemplazar las imágenes con referencias estáticas.

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

Webpack DevServer: Watch y aemsync

Otra técnica es hacer que Node.js observe si hay cambios en los archivos src en el módulo ui.frontend. Cada vez que cambie un archivo, compilará rápidamente la biblioteca del cliente y utilizará el módulo npm aemsync para sincronizar los cambios con un servidor AEM en ejecución.

  1. Inicie el servidor de desarrollo de webpack en modo watch desde un nuevo terminal ejecutando el siguiente comando desde el módulo ui.frontend:

    $ cd ~/code/aem-guides-wknd/ui.frontend/
    $ npm run watch
    
  2. Esto compilará los archivos src y sincronizará 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
    
  3. Vaya a AEM y al artículo de Los parques de patinaje de LA: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled

    Cambios implementados en AEM

    Los cambios deben implementarse en AEM. Se produce un ligero retraso y tendrá que actualizar el explorador manualmente para ver las actualizaciones. Sin embargo, es útil ver los cambios directamente en AEM si está trabajando con nuevos componentes y creación de cuadros de diálogo.

  4. Recupere el cambio en _variables.scss y guarde los cambios. Los cambios deben sincronizarse de nuevo con la instancia local de AEM después de un ligero retraso.

  5. Detenga el servidor de desarrollo de webpack y realice una compilación completa de Maven desde la raíz del proyecto:

    $ cd aem-guides-wknd
    $ mvn clean install -PautoInstallSinglePackage
    

    Nuevamente, el módulo ui.frontend se compila, se transforma en bibliotecas de clientes y se implementa en AEM a través del módulo ui.apps. Sin embargo, esta vez Maven lo hace todo por nosotros.

Felicitaciones!

Felicitaciones, la página de artículos ahora tiene algunos estilos coherentes que coinciden con la marca WKND y usted se ha familiarizado con el módulo ui.frontend.

Pasos siguientes

Aprenda a implementar estilos individuales y a reutilizar componentes principales mediante el sistema de estilos de Experience Manager. Desarrollar con el sistema de estilos cubre el uso del sistema de estilos para ampliar los componentes principales con CSS específica de la marca y configuraciones de políticas avanzadas del editor de plantillas.

Vea el código terminado en GitHub o revise e implemente el código localmente en la rama tutorial/client-side-libraries-solution de Git.

  1. Clona el repositorio github.com/adobe/aem-wknd-guides.
  2. Consulte la rama tutorial/client-side-libraries-solution.

Herramientas y recursos adicionales

aemfeed

🔗 aemfedis es una herramienta de código abierto de línea de comandos que se puede utilizar para acelerar el desarrollo del front-end. Está equipado con aemsync, Browsersync y Sling Log Tracer.

En un aemfeed de alto nivel está diseñado para escuchar los cambios de archivos dentro del módulo ui.apps y sincronizarlos automáticamente directamente con una instancia de AEM en ejecución. En función de los cambios, un explorador local se actualizará automáticamente, acelerando así el desarrollo del front-end. También está construido para funcionar con el rastreador de registros de Sling para mostrar automáticamente cualquier error del lado del servidor directamente en el terminal.

Si está haciendo mucho trabajo dentro del módulo ui.apps, modificando los scripts HTL y creando componentes personalizados, aemfeed puede ser una herramienta muy poderosa para usar. Puede encontrar la documentación completa aquí..

Depuración de bibliotecas del lado del cliente

Con diferentes métodos de categories y embeds para incluir varias bibliotecas de cliente, puede resultar complicado solucionar problemas. AEM expone varias herramientas para ayudarle con esto. Una de las herramientas más importantes es Reconstruir bibliotecas de cliente, lo que obligará a AEM a volver a compilar cualquier archivo LESS y generar el CSS.

  • Bibliotecas de volcado : enumera todas las bibliotecas de cliente registradas en la instancia de AEM. <host>/libs/granite/ui/content/dumplibs.html

  • Salida de prueba : permite al usuario ver la salida HTML esperada de clientlib incluye en función de la categoría. <host>/libs/granite/ui/content/dumplibs.test.html

  • Validación de dependencias de bibliotecas : resalta las dependencias o categorías incrustadas que no se pueden encontrar. <host>/libs/granite/ui/content/dumplibs.validate.html

  • Reconstruir bibliotecas de cliente : permite al usuario forzar a la AEM a reconstruir todas las bibliotecas de cliente o invalidar la caché de las bibliotecas de cliente. Esta herramienta es especialmente eficaz cuando se desarrolla con LESS, ya que esto puede forzar a AEM a volver a compilar el CSS generado. En general, es más eficaz Invalidar cachés y luego realizar una actualización de página en comparación con la reconstrucción de todas las bibliotecas. <host>/libs/granite/ui/content/dumplibs.rebuild.html

regenerar biblioteca cliente

En esta página