Personalizar JavaScript para Pipelines do Azure

Se você precisar de uma versão do Node.js e npm que ainda não esteja instalada no agente hospedado pela Microsoft, use a tarefa de instalador da ferramenta Node. Adicione o seguinte trecho ao seu azure-pipelines.yml arquivo.

- task: UseNode@1
  inputs:
    version: '16.x' # replace this value with the version that you need for your project

Se você precisar de uma versão do Node.js/npm que ainda não esteja instalada no agente:

1. No pipeline, selecione Tarefas, escolha a fase que executa as tarefas de compilação e, em seguida, selecione + para adicionar uma nova tarefa a essa fase.

2. No catálogo de tarefas, localize e adicione a tarefa Node Tool Installer .

3. Selecione a tarefa e especifique a versão do tempo de execução do Node.js que você deseja instalar.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

Consulte a execução de várias configurações.

Se você tiver ferramentas que são dependências de desenvolvimento em seu projeto package.json ou package-lock.json arquivo, instale suas ferramentas e dependências através do npm. A versão exata das ferramentas é definida no projeto, isolada de outras versões que existem no agente de compilação.

Use um script ou a tarefa npm.

Usar um script para instalar com o package.json

- script: npm install --only=dev

Use a tarefa npm para instalar com o package.json

- task: Npm@1
  inputs:
     command: 'install'

Execute ferramentas instaladas dessa maneira usando o executor de pacote npm npx , que deteta ferramentas instaladas dessa maneira em sua resolução de caminho. O exemplo a seguir chama o executor de teste, mocha mas procura a versão instalada como uma dependência de desenvolvimento antes de usar uma versão instalada globalmente (através npm install -gde).

- script: npx mocha

Para instalar ferramentas de que seu projeto precisa, mas que não estão definidas como dependências de desenvolvimento no package.json, ligue npm install -g de um estágio de script em seu pipeline.

O exemplo a seguir instala a versão mais recente da CLI Angular usando npmo . O restante do pipeline pode usar a ng ferramenta de outros script estágios.

- script: npm install -g @angular/cli

Use as tarefas npm ou de linha de comando em seu pipeline para instalar ferramentas em seu agente de compilação.

Para instalar pacotes npm com um script em seu pipeline, adicione o seguinte trecho ao azure-pipelines.yml.

- script: npm install

Para usar um registro privado especificado em seu .npmrc arquivo, adicione o seguinte trecho ao azure-pipelines.yml.

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

Para passar credenciais do Registro para comandos npm por meio de executores de tarefas como Gulp, adicione a seguinte tarefa antes azure-pipelines.yml de chamar o executor de tarefas.

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

Use a tarefa npm ou npm authenticate em seu pipeline para baixar e instalar pacotes.

Se suas compilações falharem ocasionalmente devido a problemas de conexão ao restaurar pacotes do registro npm, você poderá usar os Artefatos do Azure com fontes upstream e armazenar os pacotes em cache. As credenciais do pipeline são usadas automaticamente quando você se conecta aos Artefatos do Azure. Essas credenciais geralmente são derivadas da conta do Serviço de Compilação da Coleção de Projetos.

Se você estiver usando agentes hospedados pela Microsoft, receberá uma nova máquina toda vez que executar uma compilação - o que significa restaurar as dependências sempre, o que pode levar uma quantidade significativa de tempo. Para atenuar, você pode usar os Artefatos do Azure ou um agente auto-hospedado - então você obtém o benefício de usar o cache do pacote.

Use um estágio de script para invocar o Yarn para restaurar dependências. O Yarn é pré-instalado em alguns agentes hospedados pela Microsoft. Você pode instalá-lo e configurá-lo em agentes auto-hospedados como qualquer outra ferramenta.

- script: yarn install

Use a tarefa CLI ou Bash em seu pipeline para invocar o Yarn.

Use compiladores como Babel e o compilador TypeScript tsc para converter seu código-fonte em versões utilizáveis pelo tempo de execução do Node.js ou em navegadores da web.

Se você tiver um objeto de script configurado em seu arquivo de projeto package.json que executa seu compilador, invoque-o em seu pipeline usando uma tarefa de script.

- script: npm run compile

Você pode chamar compiladores diretamente do pipeline usando a tarefa de script. Esses comandos são executados a partir da raiz do repositório de código-fonte clonado.

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

Use a tarefa npm em seu pipeline se você tiver um script de compilação definido em seu projeto package.json para criar o código. Use a tarefa Bash para compilar seu código se você não tiver um script separado definido na configuração do projeto.

Configure seus pipelines para executar seus testes JavaScript para que eles produzam resultados formatados no formato XML JUnit. Em seguida, você pode publicar os resultados usando a tarefa interna de publicação de resultados de teste .

Se sua estrutura de teste não suportar a saída JUnit, adicione suporte por meio de um módulo de relatório de parceiro, como mocha-junit-reporter. Você pode atualizar seu script de teste para usar o repórter JUnit ou, se o repórter oferecer suporte a opções de linha de comando, passar essas opções para a definição de tarefa.

A tabela a seguir lista os executores de teste mais usados e os repórteres que podem ser usados para produzir resultados XML:

O exemplo a seguir usa o mocha-junit-reporter e invoca mocha test diretamente usando um script. Esse script produz a saída XML JUnit no local padrão do ./test-results.xml.

- script: mocha test --reporter mocha-junit-reporter

Se você definiu um test script em seu projeto package.json arquivo, você pode invocá-lo usando npm test.

- script: npm test

Publicar resultados de testes

Para publicar os resultados, use a tarefa Publicar resultados do teste.

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

Publicar resultados de cobertura de código

Se os scripts de teste executarem uma ferramenta de cobertura de código, como Istambul, adicione a tarefa Publicar resultados de cobertura de código. Ao fazer isso, você pode encontrar métricas de cobertura no resumo da compilação e baixar relatórios HTML para análise adicional. A tarefa espera saída de relatório Cobertura ou JaCoCo, portanto, certifique-se de que sua ferramenta de cobertura de código seja executada com as opções necessárias para gerar a saída certa. Por exemplo, --report cobertura.

O exemplo a seguir usa nyc, a interface de linha de npm test comando de Istambul, juntamente com mocha-junit-reporter e invoca o comando.

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

Use as tarefas Publicar resultados de teste e Publicar resultados de cobertura de código em seu pipeline para publicar resultados de teste junto com resultados de cobertura de código usando Istambul.

Defina as Opções de Controle para a tarefa Publicar Resultados do Teste para executar a tarefa mesmo que uma tarefa anterior tenha falhado, a menos que a implantação tenha sido cancelada.

Empacote aplicativos para agrupar todos os seus módulos de aplicativo com saídas e dependências intermediárias em ativos estáticos prontos para implantação. Adicione um estágio de pipeline após sua compilação e testes para executar uma ferramenta como webpack ou ng build usando a CLI Angular.

O primeiro exemplo chama webpack. Para ter esse trabalho, certifique-se de que webpack está configurado como uma dependência de desenvolvimento em seu arquivo de projeto package.json. Isso é executado webpack com a configuração padrão, a menos que você tenha um webpack.config.js arquivo na pasta raiz do seu projeto.

- script: webpack

O próximo exemplo usa a tarefa npm para chamar npm run build para chamar o build objeto de script definido no projeto package.json. O uso de objetos de script em seu projeto move a lógica da compilação para o código-fonte e para fora do pipeline.

- script: npm run build

Use a tarefa CLI ou Bash em seu pipeline para invocar sua ferramenta de empacotamento, como webpack ou Angular's ng build.

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

Adicione as seguintes tarefas ao seu pipeline:

• npm

  • Comando: custom
  • Comando e argumentos: install -g @angular/cli

• npm

  • Comando: install

• bash

  • Tipo: inline
  • Roteiro: ng build --prod

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

Adicione as seguintes tarefas ao seu pipeline:

• npm

  • Comando: custom
  • Comando e argumentos: install -g webpack webpack-cli --save-dev

• bash

  • Tipo: inline
  • Roteiro: npx webpack --config webpack.config.js

O Gulp é pré-instalado em agentes hospedados pela Microsoft. Execute o gulp comando no arquivo YAML:

- script: gulp                       # include any additional options that are needed

Se as etapas no arquivo gulpfile.js exigirem autenticação com um registro npm:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp                       # include any additional options that are needed

Adicione a tarefa Publicar resultados do teste para publicar os resultados do teste JUnit ou xUnit no servidor.

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

Adicione a tarefa Publicar resultados de cobertura de código para publicar resultados de cobertura de código no servidor. Você pode encontrar métricas de cobertura no resumo da compilação e pode baixar relatórios HTML para análise adicional.

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

A maneira mais simples de criar um pipeline se seu aplicativo usa Gulp é usar o modelo de compilação Node.js com gulp quando você cria o pipeline. Este modelo adiciona automaticamente várias tarefas para invocar comandos Gulp e publicar artefatos. Na tarefa, selecione Ativar cobertura de código para habilitar a cobertura de código usando Istambul.

O Grunt é pré-instalado em agentes hospedados pela Microsoft. Para executar o comando grunt no arquivo YAML:

- script: grunt                      # include any additional options that are needed

Se as etapas em seu Gruntfile.js arquivo exigirem autenticação com um registro npm:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt                      # include any additional options that are needed

A maneira mais simples de criar um pipeline se seu aplicativo usa Grunt é usar o modelo de compilação Node.js com Grunt quando você cria o pipeline. Isso adiciona automaticamente várias tarefas para invocar comandos Gulp e publicar artefatos. Na tarefa, selecione a opção Publicar no TFS/Team Services para publicar os resultados do teste e selecione Habilitar cobertura de código para habilitar a cobertura de código usando Istambul.

Publicar arquivos no Azure Pipelines

Para carregar todo o diretório de trabalho de arquivos, use a tarefa Publicar artefatos de compilação e adicione o seguinte ao seu azure-pipelines.yml arquivo.

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

Para carregar um subconjunto de arquivos, primeiro copie os arquivos necessários do diretório de trabalho para um diretório de preparo com a tarefa Copiar arquivos e, em seguida, use a tarefa Publicar artefatos de compilação.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

Publicar um módulo em um registro npm

Se a saída do seu projeto for um npm módulo para uso por outros projetos e não um aplicativo Web, use a tarefa npm para publicar o módulo em um registro local ou no registro npm público. Forneça uma combinação exclusiva de nome/versão sempre que publicar.

Exemplos

O primeiro exemplo pressupõe que você gerencie informações de versão (como por meio de uma versão npm) por meio de alterações no arquivo package.json no controle de versão. O exemplo a seguir usa a tarefa de script para publicar no registro público.

- script: npm publish

O próximo exemplo publica em um registro personalizado definido no arquivo do .npmrc seu repo. Configure uma conexão de serviço npm para injetar credenciais de autenticação na conexão à medida que a compilação é executada.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

O exemplo final publica o módulo em um feed de gerenciamento de pacotes dos Serviços de DevOps do Azure.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

Para obter mais informações sobre controle de versão e publicação de pacotes npm, consulte Publicar pacotes npm e Como posso fazer a versão dos meus pacotes npm como parte do processo de compilação?.

Implementar uma aplicação Web

Para criar um arquivo .zip pronto para publicação em um aplicativo Web, use a tarefa Arquivar arquivos :

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

Para publicar esse arquivo em um aplicativo Web, consulte Implantação do aplicativo Web do Azure.

Publicar artefatos no Azure Pipelines

Use a tarefa Publicar Artefatos de Criação para publicar arquivos de sua compilação no Azure Pipelines.

Publicar em um registro npm

Para criar e publicar um pacote npm, use a tarefa npm. Para obter mais informações sobre controle de versão e publicação de pacotes npm, consulte Publicar pacotes npm.

Implementar uma aplicação Web

Para criar um arquivo .zip pronto para publicação em um aplicativo Web, use a tarefa Arquivar arquivos. Para publicar esse arquivo em um aplicativo Web, consulte Implantação do Aplicativo Web do Azure.

Criar e enviar imagem para o registro do contêiner

Depois que o código-fonte for compilado com êxito e os testes de unidade estiverem em vigor e forem bem-sucedidos, você também poderá criar uma imagem e enviá-la por push para um registro de contêiner.