Show Menu
TOPICS×

Módulo ui.front del arquetipo del proyecto de AEM

El arquetipo de proyecto de AEM incluye un mecanismo de generación de front-end opcional basado en Webpack. El módulo ui.front se convierte así en la ubicación central de todos los recursos front-end del proyecto, incluidos los archivos JavaScript y CSS. Para aprovechar al máximo esta función útil y flexible, es importante comprender cómo encaja el desarrollo front-end en un proyecto de AEM.

Proyectos de AEM y desarrollo front-end

En términos muy simplificados, los proyectos de AEM pueden considerarse como dos partes separadas pero relacionadas:
  • Desarrollo back-end que impulsa la lógica de AEM y produce bibliotecas de Java, servicios OSGi, etc.
  • Desarrollo front-end que impulsa la presentación y el comportamiento del sitio web resultante y produce bibliotecas JavaScript y CSS
Debido a que estos dos procesos de desarrollo se centran en diferentes partes del proyecto, el desarrollo del back-end y del front-end puede suceder en paralelo.
Sin embargo, cualquier proyecto resultante debe utilizar los resultados de ambos esfuerzos de desarrollo, es decir, tanto el back-end como el front-end.
La ejecución
npm run dev
inicio el proceso de compilación de front-end que recopila los archivos JavaScript y CSS almacenados en el módulo ui.front y produce dos bibliotecas de cliente minimizadas o ClientLibs llamadas
clientlib-site
y
clientlib-dependencies
depositadas en el módulo ui.apps. Las bibliotecas de cliente se pueden implementar en AEM y permiten almacenar el código del cliente en el repositorio.
Cuando se ejecuta todo el arquetipo de proyecto de AEM utilizando todos los artefactos de
mvn clean install -PautoInstallPackage
proyecto, incluidas las bibliotecas de cliente, se insertan en la instancia de AEM.
Obtenga más información sobre las bibliotecas de cliente en la documentación de desarrollo de AEM y cómo las utiliza el módulo ui.frontent a continuación .

Información general de ClientLibs

El módulo front-end está disponible mediante AEM ClientLib . Al ejecutar el script de compilación NPM, la aplicación se crea y el paquete aem-clientlib-generator toma la salida de compilación resultante y la transforma en un ClientLib de este tipo.
ClientLib constará de los siguientes archivos y directorios:
  • css/
    :: Archivos CSS que se pueden solicitar en el HTML
  • css.txt
    :: Indica a AEM el orden y los nombres de los archivos en
    css/
    los que se pueden combinar
  • js/
    :: Archivos JavaScript que se pueden solicitar en el código HTML
  • js.txt
    Indica a AEM el orden y los nombres de los archivos en
    js/
    los que se pueden combinar
  • resources/
    :: Mapas de origen, fragmentos de código de no punto de entrada (resultantes de la división de códigos), recursos estáticos (por ejemplo, iconos), etc.

Posibles Flujos de trabajo de desarrollo front-end

El módulo de diseño frontal es una herramienta útil y muy flexible, pero no impone ninguna opinión particular sobre cómo debe utilizarse. Los siguientes son dos ejemplos de
posible
uso, pero las necesidades de cada proyecto pueden dictar otros modelos de uso.

Uso de Webpack Static Development Server

Con Webpack, puede aplicar estilo y desarrollarse en función de la salida estática de las páginas web de AEM dentro del módulo ui.front.
  1. Previsualización en AEM mediante el modo de previsualización de página o pasando
    wcmmode=disabled
    la URL
  2. Vista del origen de la página y guarde como HTML estático en el módulo ui.frontender
  3. Inicio webpack y empezar a diseñar y generar el JavaScript y CSS necesarios
  4. Ejecutar
    npm run dev
    para generar las bibliotecas de cliente
En este flujo, un desarrollador de AEM puede realizar los pasos uno y dos y pasar el HTML estático al desarrollador front-end que se desarrolla en función de la salida HTML de AEM.
También se podría aprovechar la biblioteca de componentes para capturar muestras de la salida de marcado de cada componente para trabajar en el nivel de componente en lugar de en el nivel de página.

Uso de Storybook

Al utilizar Storybook , puede realizar más desarrollo atómico del front-end. Aunque Storybook no se incluye en el arquetipo del proyecto de AEM, puede instalarlo y almacenar los artefactos del libro de historias en el módulo ui.frontender. Cuando estén listos para realizar pruebas en AEM, se pueden implementar como bibliotecas de cliente si se ejecutan
npm run dev
.
Storybook no se incluye en el arquetipo del proyecto de AEM. Si decide utilizarla, debe instalarla por separado.

Determinación del marcado

Independientemente del flujo de trabajo de desarrollo front-end que decida implementar para su proyecto, los desarrolladores back-end y los desarrolladores front-end primero deben ponerse de acuerdo en el marcado. Normalmente, AEM define el marcado, que lo proporcionan los componentes principales. Sin embargo, esto se puede personalizar si es necesario .

Módulo ui.frontender

El arquetipo de proyecto de AEM incluye un mecanismo de compilación front-end opcional basado en Webpack con las siguientes funciones.
  • Compatibilidad total con TypeScript, ES6 y ES5 (con envoltorios de Webpack aplicables)
  • Linting de TypeScript y JavaScript mediante un conjunto de reglas TSLint
  • Salida ES5, para compatibilidad con exploradores heredados
  • Globalización
    • No es necesario agregar importaciones a ningún lugar
    • Ahora se pueden agregar todos los archivos JS y CSS a cada componente.
      • La práctica recomendada está en curso
        /clientlib/js
        ,
        /clientlib/css
        o
        /clientlib/scss
    • No se necesitan archivos
      .content.xml
      ni
      js.txt
      /
      css.txt
      ya que todo se ejecuta a través de Webpack.
    • El globber extrae todos los archivos JS de la
      /component/
      carpeta.
      • Webpack permite encadenar archivos CSS/SCSS mediante archivos JS.
      • Se extraen a través de los dos puntos de entrada
        sites.js
        y
        vendors.js
        .
    • El único archivo consumido por AEM son los archivos de salida
      site.js
      y
      site.css
      tanto en
      /clientlib-site
      como
      dependencies.js
      y
      dependencies.css
      en
      /clientlib-dependencies
  • Chunks
    • Principal (sitio js/css)
    • Proveedores (dependencias js/css)
  • Compatibilidad total con Sass/Scss (Sass se compila en CSS a través de Webpack)
  • Servidor de desarrollo de webpack estático con proxy integrado para una instancia local de AEM
Para obtener más información técnica sobre el módulo ui.frontender, consulte la documentación en GitHub .

Instalación

  1. Instale NodeJS (v10+) de forma global. Esto también instalará npm.
  2. Vaya a ui.frontender en el proyecto y ejecute
    npm install
    .
Debe haber ejecutado el arquetipo con la opción
-DoptionIncludeFrontendModule=y
de rellenar la carpeta ui.frontender.

Uso

Los siguientes scripts npm impulsan el flujo de trabajo de front-end:
  • npm run dev
    - compilación completa con la optimización de JS deshabilitada (temblor de árbol, etc.) y los mapas de origen habilitados y la optimización de CSS deshabilitada.
  • npm run prod
    - compilación completa con la optimización de JS habilitada (sacudida de árboles, etc.), mapas de origen deshabilitados y optimización de CSS habilitada.
  • npm run start
    - Inicio un servidor de desarrollo de webpack estático para el desarrollo local con dependencias mínimas en AEM.

Salida

El módulo ui.front compila el código en la
ui.frontend/src
carpeta y genera el CSS y JS compilados, así como cualquier recurso debajo de una carpeta denominada
ui.frontend/dist
.
  • Sitio
    :
    site.js
    ,
    site.css
    y se crea una
    resources/
    carpeta para las imágenes y fuentes dependientes del diseño en una carpeta
    dist/
    clientlib-site.
  • Dependencias
    :
    dependencies.js
    y
    dependencies.css
    se crean en una
    dist/clientlib-dependencies
    carpeta.

JavaScript

  • Optimización: en el caso de las compilaciones de producción, se eliminan todos los JS que no se estén utilizando o llamando.

CSS

  • Autoprefixing: Todas las CSS se ejecutan a través de un prefijo y todas las propiedades que requieran un prefijo tendrán automáticamente las agregadas en la CSS.
  • Optimización: en la publicación, toda la CSS se ejecuta mediante un optimizador (cssnano) que la normaliza según las siguientes reglas predeterminadas:
    • Reduce la expresión de clics de CSS siempre que sea posible, garantizando la compatibilidad del navegador y la compresiónConvierte entre valores de longitud, tiempo y ángulo equivalentes. Tenga en cuenta que, de forma predeterminada, los valores de longitud no se convierten.
    • Quita los comentarios de las reglas, selectores y declaraciones
    • Quita reglas, reglas y declaraciones duplicadas
      • Tenga en cuenta que esto solo funciona para duplicados exactos.
    • Quita reglas vacías, consultas de medios y reglas con selectores vacíos, ya que no afectan a la salida
    • Combina reglas adyacentes por selectores y pares de propiedades/valores superpuestos
    • Garantiza que solo un @charset esté presente en el archivo CSS y lo mueve a la parte superior del documento
    • Reemplaza la palabra clave inicial CSS con el valor real, cuando la salida resultante es menor
    • Comprime las definiciones de SVG integradas con SVGO
  • Limpieza: incluye una tarea limpia explícita para eliminar los archivos CSS, JS y Map generados a petición.
  • Asignación de origen: sólo compilación de desarrollo
La opción de compilación de front-end utiliza archivos de configuración de webpack solo para desarrollo y solo para prod que comparten un archivo de configuración común. De este modo, los ajustes de desarrollo y producción se pueden modificar de forma independiente.

Generación de biblioteca de clientes

El proceso de compilación del módulo ui.frontened aprovecha el complemento aem-clientlib-generator para mover el CSS compilado, JS y cualquier recurso al módulo ui.apps. La configuración de aem-clientlib-generator se define en
clientlib.config.js
. Se generan las siguientes bibliotecas de cliente:
  • clientlib-site
    -
    ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
  • clientlib-dependencias
    -
    ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies

Inclusión de bibliotecas de cliente en páginas

clientlib-site
y
clientlib-dependencies
las categorías se incluyen en las páginas mediante la configuración de la directiva de página como parte de la plantilla predeterminada. Para vista de la política, edite la plantilla de página de
contenido > Información de página > Política
de página.
La inclusión final de las bibliotecas de cliente en la página de sitios es la siguiente:
<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>
Por supuesto, la inclusión anterior se puede modificar mediante la actualización de la directiva de página y/o la modificación de las categorías y propiedades incrustadas de las bibliotecas de cliente respectivas.

Servidor de desarrollo de Webpack estático

El módulo ui.frontender incluye un webpack-dev-server que proporciona recarga en directo para un rápido desarrollo front-end fuera de AEM. La configuración aprovecha el complemento html-webpack-plugin para insertar automáticamente CSS y JS compilados desde el módulo ui.front en una plantilla HTML estática.

Archivos importantes

  • ui.frontend/webpack.dev.js
    • Contiene la configuración para el webpack-dev-serve y señala a la plantilla html que se va a utilizar.
    • También contiene una configuración proxy para una instancia de AEM que se ejecuta en localhost:4502.
  • ui.frontend/src/main/webpack/static/index.html
    • Es el HTML estático con el que se ejecutará el servidor.
    • Esto permite a los desarrolladores realizar cambios en CSS/JS y verlos reflejados inmediatamente en el marcado.
    • Se da por hecho que el marcado colocado en este archivo refleja con precisión el marcado generado por los componentes de AEM.
    • El marcado de este archivo no se sincroniza automáticamente con el marcado de componentes de AEM.
    • Este archivo también contiene referencias a bibliotecas de cliente almacenadas en AEM, como CSS de componentes principales y CSS de cuadrícula adaptable.
    • El servidor de desarrollo de webpack está configurado para proxy que estos CSS/JS incluyen desde una instancia local de AEM en ejecución basada en la configuración que se encuentra en
      ui.frontend/webpack.dev.js
      .

Utilizando

  1. Desde la raíz del proyecto, ejecute el comando
    mvn -PautoInstallSinglePackage clean install
    para instalar todo el proyecto en una instancia de AEM que se ejecute en
    localhost:4502
    .
  2. Navegue dentro de la
    ui.frontend
    carpeta.
  3. Ejecute el siguiente comando
    npm run start
    para inicio del servidor de desarrollo de webpack. Una vez iniciado, debe abrir un navegador (
    localhost:8080
    o el siguiente puerto disponible).
Ahora puede modificar archivos CSS, JS, SCSS y TS y ver los cambios reflejados inmediatamente en el servidor de desarrollo de webpack.