AEM Revise el módulo 'ui.frontend' del proyecto de la pila completa de la aem-full-stack-ui-frontent
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 de WKND Sites.
Objetivos objective
- AEM Comprender el flujo de generación e implementación de artefactos front-end en un proyecto de pila completa de la
- AEM Revise el proyecto de pila completa de la
ui.frontend
del módulo webpack configuraciones - 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 prerequisites
- Clonar el AEM Proyecto de sitios WKND de WKND
- AEM AEM Se creó e implementó el proyecto clonado de WKND Sites de WKND para as a Cloud Service.
AEM Consulte el proyecto del sitio de WKND de la README.md para obtener más información.
AEM Flujo de artefactos front-end del proyecto de pila completa flow-of-frontend-artifacts
A continuación se presenta una representación de alto nivel del desarrollo, implementación y entrega AEM flujo de los artefactos front-end en un proyecto de pila completa de la.
Durante la fase de desarrollo, los cambios del front-end, como el estilo y el cambio de marca, se realizan actualizando los archivos CSS y JS de ui.frontend/src/main/webpack
carpeta. A continuación, durante la compilación, la variable webpack AEM module-bundler y el complemento de maven convierten estos archivos en clientlibs optimizados de la lista de distribución de la aplicación en la que se encuentran ui.apps
módulo.
AEM Los cambios del front-end se implementan en el entorno as a Cloud Service cuando se ejecuta el De pila completa canalización en Cloud Manager.
Los recursos front-end se entregan a los navegadores web a través de rutas URI que comienzan por /etc.clientlibs/
AEM , y suelen almacenarse en la caché de Dispatcher y CDN de la red de distribución de datos (CDN) de la.
Revisar las configuraciones de Webpack en el proyecto de WKND Sites development-frontend-webpack-clientlib
-
Hay tres webpack Archivos de configuración utilizados para agrupar los recursos front-end de WKND Sites.
webpack.common
- Contiene el común para instruir el agrupamiento de recursos y la optimización de WKND. El salida AEM indica a dónde emitir los archivos consolidados (también conocidos como paquetes JavaScript, pero que no se deben confundir con paquetes OSGi de la aplicación) que crea. El nombre predeterminado se establece enclientlib-site/js/[name].bundle.js
.
code language-javascript ... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
webpack.dev.js
contiene el desarrollo para el webpack-dev-serve y señala a la plantilla de HTML que se va a utilizar. AEM También contiene una configuración proxy para una instancia de que se ejecuta enlocalhost:4502
.
code language-javascript ... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
webpack.prod.js
contiene el producción y utiliza los complementos para transformar los archivos de desarrollo en paquetes optimizados.
code language-javascript ... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
-
Los recursos agrupados se mueven al
ui.apps
módulo que utiliza aem-clientlib-generator , utilizando la configuración gestionada en elclientlib.config.js
archivo.
...
const BUILD_DIR = path.join(__dirname, 'dist');
const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'wknd',
'clientlibs'
);
...
- El frontend-maven-plugin de
ui.frontend/pom.xml
AEM organiza el agrupamiento de Webpack y la generación clientlib durante la generación de proyectos de.
$ mvn clean install -PautoInstallSinglePackage
AEM Implementación en as a Cloud Service deployment-frontend-aemaacs
El De pila completa canalización AEM implementa estos cambios en un entorno as a Cloud Service de.
AEM Envío desde el as a Cloud Service delivery-frontend-aemaacs
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 de la siguiente manera: /etc.clientlibs
archivos. Puede verificarlo en la página de sitio WKND alojado públicamente y ver 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. congratulations
Felicidades, ha revisado el módulo ui.frontend del proyecto de pila completa
Pasos siguientes next-steps
En el capítulo siguiente, Actualizar proyecto para utilizar canalización front-endAEM , actualizará el proyecto de WKND Sites de la para habilitarlo para el contrato de canalización front-end.