Revisar o módulo "ui.frontend" do projeto AEM de pilha completa aem-full-stack-ui-frontent
No, este capítulo analisamos o desenvolvimento, a implantação e o delivery de artefatos de front-end de um projeto AEM de pilha completa, concentrando-se no módulo "ui.frontend" do Projeto do WKND Sites.
Objetivos objective
- Entender o fluxo de compilação e implantação de artefatos de front-end em um projeto de pilha completa de AEM
- Revise o projeto de pilha completa de AEM
ui.frontend
do módulo webpack configurações - Processo de geração de biblioteca de cliente AEM (também conhecido como clientlibs)
Fluxo de implantação de front-end para projetos de pilha completa de AEM e Criação rápida de sites
Pré-requisitos prerequisites
- Clonar o Projeto AEM WKND Sites
- Criou e implantou o projeto clonado AEM WKND Sites para AEM as a Cloud Service.
Ver o projeto do site AEM WKND README.md para obter mais detalhes.
Fluxo de artefatos de front-end do projeto de pilha completa de AEM flow-of-frontend-artifacts
Abaixo está uma representação de alto nível da desenvolvimento, implantação e entrega fluxo dos artefatos de front-end em um projeto AEM de pilha completa.
Durante a fase de desenvolvimento, alterações de front-end, como estilo e rebranding, são realizadas atualizando os arquivos CSS, JS do ui.frontend/src/main/webpack
pasta. Em seguida, durante o tempo de criação, a variável webpack module-bundler e o maven plugin transformam esses arquivos em clientlibs AEM otimizadas em ui.apps
módulo.
As alterações de front-end são implantadas no ambiente as a Cloud Service do AEM ao executar o Pilha completa pipeline no Cloud Manager.
Os recursos de front-end são fornecidos aos navegadores da Web por meio de caminhos URI que começam com /etc.clientlibs/
, e normalmente são armazenados em cache no AEM Dispatcher e no CDN.
Revisar configurações do webpack no projeto Sites WKND development-frontend-webpack-clientlib
-
Há três webpack arquivos de configuração usados para agrupar os recursos de front-end de sites WKND.
webpack.common
- Contém o comum configuração para instruir o agrupamento e a otimização de recursos WKND. A variável saída A propriedade informa onde emitir os arquivos consolidados (também conhecidos como pacotes JavaScript, mas não para ser confundido com pacotes AEM OSGi) que ela cria. O nome padrão é definido comoclientlib-site/js/[name].bundle.js
.
code language-javascript ... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
webpack.dev.js
contém o desenvolvimento configuração do webpack-dev-serve e aponta para o modelo de HTML a ser usado. Ele também contém uma configuração de proxy para uma instância AEM em execuçãolocalhost:4502
.
code language-javascript ... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
webpack.prod.js
contém o produção e usa os plug-ins para transformar os arquivos de desenvolvimento em pacotes otimizados.
code language-javascript ... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
-
Os recursos agrupados são movidos para a
ui.apps
módulo usando aem-clientlib-generator plug-in, usando a configuração gerenciada noclientlib.config.js
arquivo.
...
const BUILD_DIR = path.join(__dirname, 'dist');
const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'wknd',
'clientlibs'
);
...
- A variável front-end-maven-plugin de
ui.frontend/pom.xml
O orquestra a criação de pacotes da web e a geração de clientlib durante a compilação do projeto AEM.
$ mvn clean install -PautoInstallSinglePackage
Implantação no AEM as a Cloud Service deployment-frontend-aemaacs
A variável Pilha completa pipeline implanta essas alterações em um ambiente as a Cloud Service do AEM.
Entrega do AEM as a Cloud Service delivery-frontend-aemaacs
Os recursos de front-end implantados por meio do pipeline de pilha completa são entregues do site do AEM para navegadores da Web como /etc.clientlibs
arquivos. Você pode verificar isso visitando o site WKND hospedado publicamente e exibindo a origem da página da 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>
....
Parabéns. congratulations
Parabéns, você revisou o módulo ui.frontend do projeto de pilha completa
Próximas etapas next-steps
No próximo capítulo, Atualizar projeto para usar pipeline de front-end, você atualizará o Projeto de sites WKND do AEM para habilitá-lo para o contrato de pipeline de front-end.