Show Menu
TEMAS×

Compilación de front-end de arquetipo de proyecto de AEM

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 .content.xml ni archivos 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).

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 .

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.

Salida

General

  • Sitio: site.js y site.css se crean en una carpeta clientlib-site.
  • Dependencias - dependencies.js y dependencies.css se crean en una carpeta clientlib-dependencias.

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 calc 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 al resultado
    • 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 SVG integradas con SVGO
  • Limpieza: incluye una tarea explícita y limpia 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.