O Arquétipo de projeto do AEM inclui um mecanismo de build de front-end opcional e dedicado com base no Webpack. O módulo ui.frontend torna-se, portanto, o local central para todos os recursos de front-end do projeto, incluindo arquivos JavaScript e CSS. Para aproveitar ao máximo esse recurso útil e flexível, é importante entender como o desenvolvimento de front-end se encaixa em um projeto do AEM.
Em termos simplificados, pode-se dizer que os projetos do AEM são constituídos por duas partes distintas, mas relacionadas:
Uma vez que esses dois processos de desenvolvimento se concentram em diferentes partes do projeto, o desenvolvimento de back-end e front-end pode ocorrer paralelamente.
No entanto, qualquer projeto final tem de utilizar os resultados de ambos os esforços de desenvolvimento, ou seja, tanto de back-end como de front-end.
A execução de npm run dev
inicia o processo de build de front-end que reúne os arquivos JavaScript e CSS armazenados no módulo ui.frontend, e produz duas bibliotecas de clientes minificadas ou ClientLibs chamadas de clientlib-site
e clientlib-dependencies
e as deposita no módulo ui.apps. As ClientLibs podem ser implantadas no AEM e permitem que você armazene seu código do lado do cliente no repositório.
Quando todo o arquétipo do projeto do AEM é executado usando mvn clean install -PautoInstallPackage
, todos os artefatos do projeto, incluindo as ClientLibs, são então enviados para a instância do AEM.
Saiba mais sobre como o AEM trata as ClientLibs na documentação de desenvolvimento do AEM, como incluí-las, ou veja abaixo como o módulo ui.frontend as utiliza.
O módulo de front-end é disponibilizado usando uma ClientLib do AEM. Ao executar o script de build NPM, o aplicativo é criado e o pacote aem-clientlib-generator transforma a saída de build resultante na ClientLib.
Uma ClientLib consistirá nos seguintes arquivos e diretórios:
css/
: Arquivos CSS que podem ser solicitados no HTMLcss.txt
: Informa ao AEM a ordem e os nomes dos arquivos em css/
para que eles possam ser mescladosjs/
: Arquivos JavaScript que podem ser solicitados no HTMLjs.txt
: Informa ao AEM a ordem e os nomes dos arquivos em js/
para que eles possam ser mescladosresources/
: Mapas de origem, partes de código sem ponto de entrada (resultantes da divisão de código), ativos estáticos (por exemplo, ícones) etc.O módulo de build de front-end é uma ferramenta útil e flexível, mas não impõe nenhuma opinião específica sobre como ele deve ser usado. Veja a seguir dois exemplos de uso possível, mas suas necessidades de projeto individuais podem ditar outros modelos de uso.
Com o Webpack, é possível criar estilos e desenvolver com base na saída estática de páginas da Web no módulo ui.front-end.
wcmmode=disabled
no URLnpm run dev
para gerar as ClientLibsNesse fluxo, um desenvolvedor do AEM pode executar as etapas um e dois e transmitir o HTML estático para o desenvolvedor de front-end que se desenvolve com base na saída HTML do AEM.
Também é possível usar a Biblioteca de componentes para capturar amostras da saída de marcação de cada componente para funcionar no nível do componente, em vez do nível da página.
Com o Storybook você pode executar mais desenvolvimento atômico de front-end. Embora o Storybook não esteja incluído no Arquétipo de projeto do AEM, você pode instalá-lo e armazenar seus artefatos do Storybook no módulo ui.frontend. Quando tudo estiver pronto para ser testado no AEM, eles podem ser implantados como ClientLibs executando o npm run dev
.
O Storybook não está incluído no Arquétipo de projeto do AEM. Se você optar por usá-lo, deve instalar o Storybook separadamente.
Qualquer que seja o fluxo de trabalho de desenvolvimento do front-end que você decida implementar para seu projeto, os desenvolvedores de back-end e os de front-end devem primeiro concordar sobre a marcação. Normalmente, o AEM define a marcação, que é fornecida pelos componentes principais. No entanto, isso pode ser personalizado, caso necessário.
O Arquétipo de projeto do AEM inclui um mecanismo de build de front-end dedicado e opcional com base no Webpack com os seguintes recursos:
/clientlib/js
, /clientlib/css
ou /clientlib/scss
.content.xml
ou js.txt
/css.txt
é necessário, pois tudo é executado pelo Webpack./component/
.
sites.js
e vendors.js
.site.js
e site.css
em /clientlib-site
, e também dependencies.js
e dependencies.css
em /clientlib-dependencies
Para mais informações técnicas sobre o módulo ui.frontend, consulte a documentação no GitHub.
npm install
.Você deve ter o executar o arquétipo com a opção -DoptionIncludeFrontendModule=y
para preencher a pasta ui.frontend.
Os seguintes scripts npm direcionam o fluxo de trabalho de front-end:
npm run dev
- build completo com otimização JS desativada (tremulação de árvore etc.), mapas de origem ativados e otimização CSS desativada.npm run prod
- build completo com otimização JS ativada (tremulação de árvore etc.), mapas de origem desativados e otimização CSS ativada.npm run start
- inicia um servidor de desenvolvimento de webpack estático para desenvolvimento local com dependências mínimas no AEM.O módulo ui.frontend compila o código sob a pasta ui.frontend/src
e gera o CSS e o JS compilados e todos os recursos abaixo de uma pasta chamada ui.frontend/dist
.
site.js
, site.css
e uma pasta resources/
para imagens e fontes dependentes de layout são criadas em uma pasta dist/
clientlib-site.dependencies.js
e dependencies.css
são criadas em uma pasta dist/clientlib-dependencies
.A opção de build de front-end utiliza arquivos de configuração de webpack somente dev e prod que compartilham um arquivo de configuração comum. Dessa forma, as configurações de desenvolvimento e produção podem ser modificadas independentemente.
O processo de build do módulo ui.frontend aproveita o plug-in aem-clientlib-generator para mover o CSS compilado, o JS e quaisquer recursos para o módulo ui.apps. A configuração aem-clientlib-generator é definida em clientlib.config.js
. As seguintes bibliotecas de clientes são geradas:
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
As categorias clientlib-site
e clientlib-dependencies
são incluídas nas páginas por meio da configuração da Política da página como parte do modelo padrão. Para exibir a política, edite o Modelo da página de conteúdo > Informações da página > Política da página.
A inclusão final das bibliotecas de clientes na página de sites é a seguinte:
<HTML>
<head>
<link rel="stylesheet" href="clientlib-base.css" type="text/css">
<script type="text/javascript" src="clientlib-dependencies.js"></script>
<link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="clientlib-site.css" type="text/css">
</head>
<body>
....
<script type="text/javascript" src="clientlib-site.js"></script>
<script type="text/javascript" src="clientlib-base.js"></script>
</body>
</HTML>
A inclusão acima pode, é claro, ser modificada ao atualizar a Política da página e/ou modificar as categorias e propriedades incorporadas das respectivas bibliotecas de clientes.
Incluído no módulo ui.frontend está um webpack-dev-server que fornece recarregamento ao vivo para rápido desenvolvimento de front-end fora do AEM. A configuração utiliza o html-webpack-plugin para injetar automaticamente o CSS e JS compilados do módulo ui.frontend em um modelo HTML estático.
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
.mvn -PautoInstallSinglePackage clean install
para instalar o projeto inteiro em uma instância do AEM em execução em localhost:4502
.ui.frontend
.npm run start
para iniciar o servidor de desenvolvimento do webpack. Uma vez iniciado, ele deve abrir um navegador (localhost:8080
ou a próxima porta disponível).Agora você pode modificar arquivos CSS, JS, SCSS e TS e ver as alterações imediatamente refletidas no servidor de desenvolvimento do webpack.