Show Menu
TÓPICOS×

Compilação Front-End do Arquivo de Projeto AEM

O AEM Project Archetype inclui um mecanismo de criação de front-end dedicado opcional, baseado no Webpack com os seguintes recursos.
  • Suporte completo para TypeScript, ES6 e ES5 (com invólucros aplicáveis do Webpack)
  • Links TypeScript e JavaScript usando um conjunto de regras TSLint
  • Saída ES5, para suporte a navegador herdado
  • Recurso de coringa
    • Não é necessário adicionar importações em qualquer lugar
    • Todos os arquivos JS e CSS agora podem ser adicionados a cada componente
      • As melhores práticas estão em /clientlib/js , /clientlib/css ou /clientlib/scss
    • Nenhum arquivo .content.xml ou js.txt / css.txt arquivos necessários, pois tudo é executado pelo Webpack
    • O globber extrai todos os arquivos JS sob a /component/ pasta.
      • O Webpack permite que os arquivos CSS/SCSS sejam encadeados via arquivos JS.
      • Elas são puxadas pelos dois pontos de entrada, sites.js e vendors.js .
    • O único arquivo consumido pelo AEM são os arquivos de saída site.js e site.css em /clientlib-site ambos, dependencies.js dependencies.css e em /clientlib-dependencies
  • Pedaços
    • Principal (site js/css)
    • Fornecedores (dependências js/css)
  • Suporte total de Sass/Scss (o Sass é compilado para CSS via Webpack).

Instalação

  1. Instale NodeJS (v10+) globalmente. Isso também instalará o npm.
  2. Navegue até ui.frontenda em seu projeto e execute npm install .

Uso

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.

Saída

Geral

  • Site - site.js e site.css são criados em uma pasta clientlib-site.
  • Dependências - dependencies.js e dependencies.css são criadas em uma pasta de dependências clientlib.

JavaScript

  • Otimização - para compilações de produção, todos os JS que não estão sendo usados ou chamados são removidos.

CSS

  • Prefixação automática - Todos os CSS são executados por meio de um prefixador e todas as propriedades que exigem prefixação terão automaticamente aquelas adicionadas ao CSS.
  • Otimização - No post, todo o CSS é executado por um otimizador (cssnano) que o normaliza de acordo com as seguintes regras padrão:
    • Reduz a expressão CSS calc sempre que possível, garantindo a compatibilidade e a compactação do navegadorConverte entre valores equivalentes de comprimento, tempo e ângulo. Observe que, por padrão, os valores de comprimento não são convertidos.
    • Remove comentários em regras, seletores e declarações e ao redor deles
    • Remove regras, regras e declarações duplicadas
      • Observe que isso só funciona para duplicatas exatas.
    • Remove regras vazias, consultas de mídia e regras com seletores vazios, pois não afetam a saída
    • Une regras adjacentes por seletores e pares de propriedades/valores sobrepostos
    • Garante que apenas um único @charset esteja presente no arquivo CSS e o mova para a parte superior do documento
    • Substitui a palavra-chave inicial do CSS pelo valor real, quando a saída resultante for menor
    • Compacta definições SVG em linha com SVGO
  • Limpeza - Inclui uma tarefa explícita de limpeza para eliminar os arquivos CSS, JS e Map gerados sob demanda.
  • Mapeamento de origem - compilação de desenvolvimento somente
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.