Criar um build com o Dojo

Novembro 2016


NDLR: Esta dica ainda não está completamente terminada.

Bom dia a todos,

Este tutorial é para pessoas que criaram um site em torno do framework JavaScript DOJO. Aqui vamos abordar um ponto-chave do framework: o build.

O que é o build?


Em uma frase: é a fusão de todos os arquivos JS em um só, para reduzir as chamadas dos servidores.

Você já deve ter notado que o princípio do Dojo é separar o seu código JavaScript em classes, chamando uns aos outros, como um projeto Java.
Sim, mas agora, cada classe está contida em seu próprio arquivo .JS e cada arquivo é uma chamada adicional para o servidor, durante o upload do seu site.
Se você tiver 20 classes, com um servidor médio respondendo em 200ms, você chegará a um tempo de carregamento de 4 segundos, sem as imagens, o CSS, ... É demorado

Felizmente, isto foi pensado pelos programadores do Dojo, que oferece o sistema build. Concretamente, isso consiste em agrupar todos os seus arquivos JS em um só, comprimir tudo, se você quiser, e fazer o mesmo com os seus CSS. No final, um único arquivo, um pouco mais pesado para baixar: um tempo de carregamento de cerca de 4 segundos! Oba!

Princípio do build


Teoricamente, um build é muito simples de implementar: você define todas as classes JS utilizadas em seu site em um arquivoP.pofile.js; em seguida, você chama um script pronto com as opções desejadas e o build é feito. Fácil, certo?

Criação de um build


Na prática, é mais complicado: o .profile.js não é fácil de aprender e nem sempre é fácil de compreender as interconexões entre os diferentes elementos. Vamos explicar tudo isso com um exemplo "básico" que, espero, ajudará melhor.

Passo n° 0: Pré-requisitos


O build utiliza o framework Rhino da Mozilla. Ele está presente nas fontes do build; no entanto, ele precisa que você tenha o Java JRE 1.4.2, ou superior, em seu computador. Para verificar, acesse o site oficial do Java Sun: http://www.java.com/pt_BR/download/installed.jsp?detect=jre&try=1

Passo n° 1: Download das fontes do Dojo


A versão básica do Dojo fornece as pastas Dojo, Dojox e Dijit. Ela não tem uma pasta crucial: "util". Esta pasta contém todas as ferramentas para criar o nosso build. Ela so está presente nos downloads de fontes completas. Recupere-as:
  • Vá neste site: http://download.dojotoolkit.org/
  • Clique na ultima versão estável (a não ser que você goste de se arriscar).
  • Baixe um arquivo cujo nome contenha "-src" (zip ou tar.gz, como quiser)
  • Descompacte-o na pasta de sua escolha!

Passo n° 2: Preparar suas classes


Este passo é simples, mas crucial: você deve anotar os nomes de todas as suas classes JS declaradas no Dojo. Ou seja, todos os "dojo.provide ("minhapasta1.minhapasta2.MinhaClasse")". Para cada uma destas classes, anote:
  • Seu nome ("minhapasta1.minhapasta2.MinhaClasse")
  • Seu caminho relativo a partir da pasta "buildscripts", que está no seu arquivo descompactado (<seuarquivo>/util/buildscript).

Passo n° 3 Criar seu arquivo .profile.js


Você tem os seus nomes e caminhos de classe? Bom, agora vá na pasta "perfis" da pasta "buildscripts". Já existe um monte de perfis: crie um novo com base no existente baseplus.profile.js que você vai renomear meuperfil.profile.js;
Este perfil baseplus contém uma única camada (layer) e dois caminhos (prefixos) necessários para essa camada. Agora é muito simples:
  • Mantenha a camada dojo.js e substitua os nomes das classes pelas suas.
  • Adicione todos os seus caminhos aos prefixes (exemplo: " minhapasta1.minhapasta2: "../../minhapasta1/minhapasta2").


/!\ Certifique-se de que os seus prefixos apontam para as pastas corretas a partir do buildscripts !

Passo n° 4: Criar uma pasta de release


Volte para a pasta raiz do seu arquivo descompactado (aquele que contém dojo, dijit , dojox e util) e cria uma nova pasta: "release". Esta pasta conterá todos os arquivos criados pelo Dojo.
NOTA: o build não vai criar apenas um arquivo JS! Ele vai compactar e copiar todas as suas classes: é normal! e não se esqueça de recopiá-los em seu site. Elas não serão carregadas, mas o Dojo as terá a mão, se algo der errado com um arquivo compactado, por exemplo! .

Passo n° 5 : Executar o build


Agora é simples, passe em linha de comando para executar o script. Se você estiver no Unix, você provavelmente saberá o que fazer, para os usuários do Windows, fazer Iniciar - Executar - cmd.
No console que se abre, navegue até a pasta buildscripts usando o comando "cd <meudiretório>".
Uma vez na pasta buildscript, execute a seguinte linha:

build.bat profile=meuperfil releaseDir=../release action:clean,release releaseName=1.0 cssOptimize=comments optimize=shrinksage mini=true


Na verdade, estamos executando o arquivo build.bat com várias opções:
  • profile: arquivo profile que você criou. Ponha apenas o seu nome (sem ".profile.js").
  • releaseDir: caminho relativo para a pasta release/ que você criou .
  • action: aqui limpamos a pasta release e criamos uma nova.
  • releaseName : nome da sua release (aqui, versão1.0, por exemplo)
  • cssOptimize: "comments" removerá todos os comentários CSS e compactara tudo.
  • optimize: "shrinksafe" pede ao build para compactar os arquivos JS finais.
  • mini=true: pede para ter a menor versão possível no final.

Todas as opções estão listadas aqui : http://dojotoolkit.org/reference-guide/build/buildScript.html#build-buildscript
// para terminar

Fontes


Veja as fontes que me ajudaram a entender o funcionamento do Dojo Build.


Tradução feita por Lucia Maurity y Nouira

Veja também :
Este documento, intitulado « Criar um build com o Dojo »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.