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

IMPORTANT
En este vídeo se explica y muestra el flujo front-end para ambos Creación rápida y completa de sitios proyectos para delinear la sutil diferencia en la generación, implementación y modelo de entrega de recursos front-end.

Requisitos previos prerequisites

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.

Desarrollo, implementación y entrega de artefactos front-end

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.

NOTE
Del mismo modo, en la variable AEM Recorrido de creación rápida de sitios de, el cambios del front-end AEM se implementan en el entorno as a Cloud Service de ejecutando el Front-End canalización, consulte Configurar la canalización

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.

    1. 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 en clientlib-site/js/[name].bundle.js.
    code language-javascript
        ...
        output: {
                filename: 'clientlib-site/js/[name].bundle.js',
                path: path.resolve(__dirname, 'dist')
            }
        ...
    
    1. 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 en localhost:4502.
    code language-javascript
        ...
        devServer: {
            proxy: [{
                context: ['/content', '/etc.clientlibs', '/libs'],
                target: 'http://localhost:4502',
            }],
        ...
    
    1. 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 el clientlib.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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9