AEM Revise el módulo 'ui.frontend' del proyecto de la pila completa de la
Creado para:
- Intermedio
- Desarrollador
- Administrador
AEM En, en este capítulo revisamos el desarrollo, la implementación y el envío de los artefactos front-end de un proyecto de pila completa, centrándonos en el módulo "ui.frontend" del proyecto WKND Sites.
Objetivos
- AEM Comprender el flujo de generación e implementación de artefactos front-end en un proyecto de pila completa de la
- AEM Revise las configuraciones webpack del módulo
ui.frontend
del proyecto de pila completa de la - AEM proceso de generación de la biblioteca de cliente (también conocida como clientlibs)
AEM Flujo de implementación front-end para proyectos de creación rápida de sitios y de pila completa de los que se ha realizado un seguimiento de la aplicación
Requisitos previos
- AEM Clonar el proyecto de sitios WKND de
- AEM Se creó e implementó el proyecto clonado de WKND Sites de la en AEM as a Cloud Service.
AEM Consulte el proyecto de sitio de WKND de la LÉAME.md para obtener más información.
AEM Flujo de artefactos front-end del proyecto de pila completa
AEM A continuación se muestra una representación de alto nivel del flujo de desarrollo, implementación y entrega de los artefactos front-end en un proyecto de pila completa de la.
Durante la fase de desarrollo, se realizan cambios en el front-end como el estilo y el cambio de marca mediante la actualización de los archivos CSS, JS de la carpeta ui.frontend/src/main/webpack
. AEM A continuación, durante el tiempo de compilación, el complemento module-bundler y maven de webpack convierte estos archivos en clientlibs optimizados en el módulo ui.apps
de .
Los cambios del front-end se implementan en el entorno de AEM as a Cloud Service al ejecutar la canalización Full-stack en Cloud Manager.
AEM Los recursos front-end se entregan a los exploradores web a través de rutas de URI que comienzan por /etc.clientlibs/
y, por lo general, se almacenan en caché en Dispatcher y CDN de la.
Revisar las configuraciones de Webpack en el proyecto de WKND Sites
-
Hay tres archivos de configuración webpack utilizados para agrupar los recursos front-end de los sitios WKND.
webpack.common
: contiene la configuración común para indicar al paquete de recursos WKND y la optimización. La propiedad output indica a dónde emitir los archivos consolidados (también conocidos como paquetes JavaScript AEM, pero que no se deben confundir con paquetes OSGi) que crea. El nombre predeterminado esclientlib-site/js/[name].bundle.js
.
... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
webpack.dev.js
contiene la configuración de desarrollo para el webpack-dev-serve y señala a la plantilla de HTML que se va a usar. AEM También contiene una configuración de proxy para una instancia de que se ejecuta enlocalhost:4502
.
... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
webpack.prod.js
contiene la configuración de production y usa los complementos para transformar los archivos de desarrollo en paquetes optimizados.
... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
-
Los recursos agrupados se mueven al módulo
ui.apps
mediante el complemento aem-clientlib-generator, utilizando la configuración administrada en el archivoclientlib.config.js
.
...
const BUILD_DIR = path.join(__dirname, 'dist');
const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'wknd',
'clientlibs'
);
...
- AEM frontend-maven-plugin de
ui.frontend/pom.xml
organiza el agrupamiento de Webpack y la generación de clientlib durante la compilación de proyectos de la red de distribución de contenido (clientlib) durante la creación de la misma.
$ mvn clean install -PautoInstallSinglePackage
Implementación en AEM as a Cloud Service
La canalización Full-stack implementa estos cambios en un entorno de AEM as a Cloud Service.
Envío desde AEM as a Cloud Service
AEM Los recursos front-end implementados a través de la canalización de pila completa se entregan desde el sitio a los navegadores web como /etc.clientlibs
archivos. Puede comprobarlo si visita el sitio WKND alojado públicamente y ve el origen de la página web.
....
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-181cd4102f7f49aa30eea548a7715c31-lc.min.css" type="text/css">
...
<script async src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-d4e7c03fe5c6a405a23b3ca1cc3dcd3d-lc.min.js"></script>
....
Enhorabuena.
Felicidades, ha revisado el módulo ui.frontend del proyecto de pila completa
Pasos siguientes
AEM En el capítulo siguiente, Actualizar proyecto para utilizar canalización front-end, actualizará el proyecto de sitios WKND de la para habilitarlo para el contrato de canalización front-end.