O AEM Project Archetype inclui um mecanismo de criação de front-end opcional e dedicado baseado no Webpack. Assim, o módulo ui.frontenda se torna o local central para todos os recursos 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 AEM.
Em termos muito simplificados, AEM projetos podem ser considerados como compostos por duas partes distintas, mas relacionadas:
Como esses dois processos de desenvolvimento estão focados em diferentes partes do projeto, o desenvolvimento de back-end e front-end pode acontecer em paralelo.
No entanto, qualquer projeto resultante tem de utilizar os resultados de ambos os esforços de desenvolvimento, ou seja, tanto os back-end como os front-end.
A execução npm run dev
start o processo de compilação front-end que reúne os arquivos JavaScript e CSS armazenados no módulo ui.front-end e produz duas bibliotecas de clientes minified ou ClientLibs chamadas clientlib-site
e clientlib-dependencies
e as deposita no módulo ui.apps. Os ClientLibs podem ser implantados para AEM e permitir que você armazene seu código do cliente no repositório.
Quando todo o arquétipo de projeto AEM é executado usando mvn clean install -PautoInstallPackage
, todos os artefatos do projeto, incluindo o ClientLibs, são empurrados para a instância AEM.
Saiba mais sobre como AEM o ClientLibs lida com a documentação de desenvolvimento AEM, como incluí-los](/docs/experience-manager-core-components/developing/including-clientlibs.html?lang=pt-BR), ou ver abaixo como o módulo ui.frontenda os utiliza.[
O módulo de front-end é disponibilizado usando um AEM ClientLib. Ao executar o script de compilação NPM, o aplicativo é criado e o pacote aem-clientlib-generator pega a saída de compilação resultante e a transforma em um ClientLib.
Um ClientLib consistirá nos seguintes arquivos e diretórios:
css/
: Arquivos CSS que podem ser solicitados no HTMLcss.txt
: Informa AEM a ordem e os nomes dos arquivos para css/
que possam ser mescladosjs/
: Arquivos JavaScript que podem ser solicitados no HTMLjs.txt
Informa AEM a ordem e os nomes dos arquivos para js/
que possam ser mescladosresources/
: Mapas de origem, partes de código de não-ponto de entrada (resultantes da divisão do código), ativos estáticos (por exemplo, ícones), etc.O módulo de construção front-end é uma ferramenta útil e muito flexível, mas não impõe nenhuma opinião específica sobre como ele deve ser usado. A seguir estão dois exemplos de uso possible, mas suas necessidades de projeto individuais podem ditar outros modelos de uso.
Usando o Webpack, você pode estilizar e desenvolver com base na saída estática de AEM páginas da Web no módulo ui.frontenda.
wcmmode=disabled
no URLnpm run dev
para gerar o ClientLibsNesse fluxo, um desenvolvedor AEM pode executar as etapas um e dois e passar o HTML estático para o desenvolvedor front-end que se desenvolve com base na saída AEM HTML.
Também é possível aproveitar a Biblioteca de componentes para capturar amostras da saída de marcação de cada componente para trabalhar no nível do componente em vez do nível da página.
Usando Storybook você pode executar mais desenvolvimento atômico front-end. Embora o Storybook não esteja incluído no AEM Project Archetype, você pode instalá-lo e armazenar seus artefatos do Storybook no módulo ui.frontenda. Quando prontos para testes no AEM, eles podem ser implantados como ClientLibs executando npm run dev
.
Qualquer que seja o fluxo de trabalho de desenvolvimento de front-end que você decida implementar para seu projeto, os desenvolvedores de back-end e desenvolvedores de front-end devem primeiro concordar com a marcação. Geralmente AEM define a marcação, que é fornecida pelos componentes principais. No entanto, isso pode ser personalizado, se necessário.
O AEM Project Archetype inclui um mecanismo de criação de front-end dedicado opcional baseado 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
, bem como dependencies.js
e dependencies.css
em /clientlib-dependencies
Para obter mais informações técnicas sobre o módulo ui.frontende, consulte a documentação no GitHub.
npm install
.Você deve ter executar o archetype com a opção -DoptionIncludeFrontendModule=y
para preencher a pasta ui.front-end.
Os seguintes scripts npm direcionam o fluxo de trabalho de front-end:
npm run dev
- compilação completa com otimização JS desativada (tremulação de árvore, etc.) e mapas de origem ativados e otimização CSS desativada.npm run prod
- compilação completa com otimização JS ativada (tremulação de árvore, etc.), mapas de origem desativados e otimização CSS ativada.npm run start
- Start um servidor estático de desenvolvimento de webpack para desenvolvimento local com dependências mínimas de AEM.O módulo ui.front-end compila o código na pasta ui.frontend/src
e gera os CSS e JS compilados, além de todos os recursos abaixo de uma pasta chamada ui.frontend/dist
.
site.js
e uma site.css
pasta para imagens e fontes dependentes de layout são criados em uma pasta do site resources/
dist/
clientlib.dependencies.js
e dependencies.css
são criadas em uma dist/clientlib-dependencies
pasta.A opção de compilação front-end utiliza arquivos de configuração do 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 compilação do módulo ui.frontenda 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 está 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
clientlib-site
e clientlib-dependencies
as categorias são incluídas nas páginas por meio da configuração da Política de página como parte do modelo padrão. Para visualização da política, edite Modelo de página de conteúdo > Informações da página > Política de 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, obviamente, ser modificada atualizando a Política de página e/ou modificando as categorias e as propriedades incorporadas das respectivas bibliotecas clientes.
Incluído no módulo ui.front-end está um servidor webpack-dev que fornece recarregamento ao vivo para rápido desenvolvimento front-end fora do AEM. A configuração aproveita o html-webpack-plugin para injetar automaticamente o CSS e o JS compilados do módulo ui.front-end 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 AEM em execução em localhost:4502
.ui.frontend
.npm run start
para start do servidor dev de webpack. Depois de 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 de webpack.