Um tour pelos componentes JavaScript: construindo componentes com Ant

Onde estivemos? Você está cansado de pensar muito nas duas primeiras edições? Não se preocupe, o tópico desta edição é muito fácil. Você só precisa entender brevemente alguma sintaxe e escrever algumas linhas de configuração, e você pode fazer com que o sistema conclua automaticamente algum trabalho de acordo com seu método predefinido. Não parece agradável? Vamos embora ~

Nesta edição, usaremos Ant para mesclar os arquivos de código escritos e organizados na edição anterior em um único arquivo de origem na ordem especificada e, em seguida, compactar esse arquivo. Estas são as etapas básicas para construir um projeto JavaScript. Ant é um dos principais projetos de código aberto do Apache. Existem muitos artigos sobre sua introdução e instalação na Internet, então não entrarei em detalhes aqui. Antes de construir, vamos dar uma olhada no layout do arquivo existente:

smart-queue // O diretório raiz do componente
+--- src // Diretório do arquivo fonte JavaScript
+--- lang.js // O "arquivo externo" mencionado acima
+--- smart-queue.js // Arquivo principal da Fila Inteligente

Agora, queremos torná-lo "cheio":

• Adicione no diretório raiz do componente:
  • LEIA-ME: Apresentando o componente Smart Queue
  • LICENÇA: Informações de licença do componente
  • build.xml: arquivo de configuração usado pelo Ant
• Adicione o subdiretório lib ao diretório raiz do componente: armazene programas externos e arquivos de biblioteca que precisam ser usados ​​durante o processo de construção
  • Adicione yuicompressor.jar no subdiretório lib: Usamos YUI Compressor para compactar JavaScript
• Adicione o subdiretório test no diretório raiz do componente: armazene os arquivos necessários para testar o componente (descrito na próxima edição)
• Adicione intro.js ao diretório src: introduza a versão e as informações de descrição do componente

Embora o pardal seja pequeno, ele possui todos os órgãos internos. Agora o Smart Queue parece um projeto JavaScript mais profissional:

smart-queue // O diretório raiz do componente
+--- lib // Programa externo JavaScript e diretório de arquivo de biblioteca
+--- yuicompressor.jar // Compressor YUI
+--- test //Diretório do arquivo de teste
+--- src // Diretório do arquivo fonte JavaScript
+--- intro.js // Introdução e informações sobre versão
+--- lang.js // O "arquivo externo" mencionado acima
+--- smart-queue.js // Arquivo principal da Fila Inteligente
+--- README // arquivo leiame do componente
+--- LICENÇA // Informações de autorização do componente

Planejamos armazenar os arquivos compilados no subdiretório build no diretório raiz do componente e também criá-los e destruí-los por meio da ferramenta build. Antes de tentar construir pela primeira vez, é recomendado ter um entendimento geral da estrutura do arquivo de configuração do Ant - build.xml:

<nome do projeto="MeuProjeto" default="dist" basedir=".">
<descrição>
arquivo de compilação de exemplo simples
</descrição>
<!-- definir propriedades globais para esta compilação -->
<property name="src" location="src"/>
<nome da propriedade="construir" local="construir"/>
<nome da propriedade="dist" location="dist"/>

<nome do destino="init">
<!-- Crie o carimbo de data/hora -->
<tstamp/>
<!-- Crie a estrutura de diretório de compilação usada pela compilação -->
<mkdir dir="${build}"/>
</target>

<target name="compile" depende="init"
description="compilar o código-fonte" >
<!-- Compile o código java de ${src} em ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</target>

<nome do destino = "limpo"
description="limpar" >
<!-- Exclua as árvores de diretórios ${build} e ${dist} -->
<delete dir="${build}"/>
<delete dir="${dist}"/>
</target>
</projeto>

Observe com atenção Além do nome e da descrição, que são fáceis de entender, outros padrões que podem ser vistos incluem:

• O valor do atributo padrão do elemento do projeto corresponde ao atributo name de um determinado elemento de destino;
• O valor do atributo depende do elemento de destino corresponde ao atributo name de alguns outros elementos de destino;
• ${somename} pode se referir ao valor definido na propriedade.

Fonte: Alipay UED