Pipelines para aplicativos de JavaScript

Este artigo explica como o Azure Pipelines funciona com aplicativos JavaScript. Os agentes hospedados pela Microsoft pré-instalam ferramentas comuns de build, teste e implantação do JavaScript, como npm, Node.js, Yarn e Gulp, sem exigir que você configure qualquer infraestrutura. Você também pode configurar agentes auto-hospedados.

Para criar rapidamente um pipeline para JavaScript, consulte o início rápido do JavaScript.

Instaladores de ferramentas Node.js

Para instalar as versões Node.js e npm que não estão pré-instaladas ou instalar as ferramentas em agentes auto-hospedados:

Para npm, execute o npm i -g npm@version-number comando em seu pipeline.
Para Node.js, adicione a tarefa Use Node.js ecosystem v1 (UseNode@1) no pipeline.

YAML
Clássico

Para instalar uma versão Node.js específica, adicione o seguinte código ao arquivo azure-pipelines.yml :

- task: UseNode@1
  inputs:
    version: '16.x' # replace with the version you need

Observação

Essa tarefa pode exigir uma atualização de tempo significativa para uma versão secundária mais recente sempre que o pipeline for executado. Os agentes hospedados pela Microsoft são atualizados regularmente, portanto, use essa tarefa apenas para instalar versões específicas do Nó que não são pré-instaladas. Para descobrir quais versões Node.js e npm são pré-instaladas em agentes hospedados pela Microsoft, consulte Software.

Você pode usar a tarefa Usar Node.js ecossistema v1 com uma matrix estratégia para criar e testar seu aplicativo em várias versões do Node.js. Para obter mais informações, consulte a configuração de múltiplas tarefas.

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

Instalação da ferramenta de gestão de dependências

Se você tiver ferramentas de dependência de desenvolvimento em seu projeto package.json ou package-lock.json arquivo, instale as ferramentas e as dependências por meio do npm. O arquivo de projeto define a versão exata das ferramentas, independentemente de outras versões que existem no agente de build.

Para instalar essas ferramentas em seu agente de build, use um script, a tarefa npm ou uma tarefa de linha de comando em seu pipeline.

Para usar um script:

- script: npm install --only=dev

Para usar a tarefa npm:

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

As ferramentas instaladas dessa forma usam o executor de pacotes npm npx, que detecta as ferramentas em sua resolução PATH. O exemplo a seguir chama o mocha executor de teste e usa a versão de dependência de desenvolvimento em vez da versão instalada globalmente por meio de npm install -g.

- script: npx mocha

Para instalar ferramentas que seu projeto precisa que não sejam definidas como dependências de desenvolvimento em package.json, chame npm install -g de um script em seu pipeline. O exemplo a seguir instala a versão mais recente da CLI do Angular usando npm. Outros scripts no pipeline podem usar os comandos Angular ng.

- script: npm install -g @angular/cli

Observação

Nos agentes do Linux hospedados pela Microsoft, introduza o comando com sudo, como sudo npm install -g.

Essas tarefas de instalação de ferramenta são executadas sempre que o pipeline é executado, portanto, lembre-se de seu impacto nos tempos de compilação. Se a sobrecarga afetar seriamente o desempenho do build, considere o uso de agentes auto-hospedados pré-configurados com as versões de ferramenta necessárias.

Observação

Essas tarefas de instalação de ferramenta são executadas sempre que o pipeline é executado, portanto, lembre-se de seu impacto nos tempos de compilação.

Downloads do pacote de dependência

Você pode usar o Yarn ou o Azure Artifacts para baixar pacotes do registro npm público ou de um registro npm privado especificado em um arquivo *.npmrc . Para especificar um registro npm, adicione sua URL ao arquivo *.npmrc em seu repositório de código.

Usar npm

Você pode usar o npm para baixar pacotes de build em seu pipeline das seguintes maneiras:

Para a maneira mais simples de baixar pacotes sem autenticação, execute npm installdiretamente .
Para usar um registro autenticado, adicione a tarefa npm .
Para executar npm install de dentro dos executores de tarefas Gulp, Grunt ou Maven, use a tarefa npm authenticate.

Observação

Se o feed npm usar autenticação, você deverá criar uma conexão de serviço npm na guia Serviços nas configurações do Projeto do Azure DevOps para gerenciar suas credenciais.

Para instalar pacotes npm diretamente, use o seguinte script no azure-pipelines.yml. Se o agente de build não precisar de dependências de desenvolvimento, você poderá acelerar os tempos de build adicionando a opção --only=prod a npm install.

- script: npm install --only=prod

Para usar um registro privado especificado em seu arquivo *.npmrc, adicione a tarefa Npm@1 ao azure-pipelines.yml.

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

Para passar credenciais de um registro a comandos npm por meio de ferramentas de execução de tarefas como Gulp, adicione a tarefa npmAuthenticate@0 ao arquivo azure-pipelines.yml antes de chamar a ferramenta de execução de tarefa.

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

Observação

Os agentes hospedados pela Microsoft usam um novo computador a cada build. O processo de restaurar dependências pode levar um tempo significativo. Para atenuar o problema, você pode usar o Azure Artifacts ou um agente auto-hospedado com o cache de pacotes.

Se as compilações falharem ocasionalmente devido a problemas de conexão ao restaurar pacotes do registro npm, você poderá usar o Azure Artifacts com fontes upstream para armazenar em cache os pacotes. O Azure Artifacts usa automaticamente as credenciais do pipeline, que normalmente são derivadas da conta do Serviço de Build da Coleção de Projetos .

Observação

O processo de restaurar dependências pode levar um tempo significativo. Para atenuar o problema, você pode usar o Azure Artifacts ou um agente auto-hospedado com o cache de pacotes.

Usar Yarn

Use um script para instalar o Yarn para restaurar dependências. O Yarn é pré-instalado em alguns agentes hospedados pela Microsoft. Você pode instalar e configurar o Yarn em agentes auto-hospedados, como qualquer outra ferramenta.

- script: yarn install

Você também pode usar a tarefa CLI ou Bash em seu pipeline para invocar o Yarn.

Compiladores JavaScript

Os aplicativos JavaScript usam compiladores como Babel e o compilador TypeScripttsc para converter o código-fonte em versões utilizáveis pelo runtime Node.js ou em navegadores da Web. Se você tiver um objeto de script configurado em seu projeto package.json arquivo para executar o compilador, você poderá invocá-lo em seu pipeline.

- script: npm run compile

Você também pode chamar compiladores diretamente do pipeline usando um script. Esses comandos são executados na raiz do repositório de código-fonte clonado.

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

Você pode usar a tarefa npm para criar o código se o projeto package.json definir um script de compilação. Se você não definir um script de compilação, poderá usar a tarefa Bash para compilar seu código.

Teste de unidade

Você pode configurar seus pipelines para executar seus testes JavaScript para que eles produzam resultados no formato JUnit XML. Em seguida, você pode publicar os resultados usando a tarefa Publicar resultados do teste .

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

A tabela a seguir lista os executores de teste mais usados e os repórteres que você pode usar para produzir resultados XML:

Executor de teste	Repórteres para relatórios XML
Mocha	mocha-junit-reporter cypress-multi-reporters
Jasmim	jasmine-reporters
Jest	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Yasmin	tap-xunit

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

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

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

- script: npm test

Publicar resultados de teste

Para publicar os resultados do teste, 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 . Em seguida, você pode ver as métricas de cobertura no resumo do build e baixar relatórios HTML para análise adicional.

A tarefa espera a saída de relatórios de Cobertura ou JaCoCo. Verifique se a ferramenta de cobertura de código funciona com as opções necessárias para gerar a saída correta, por exemplo --report cobertura.

YAML
Clássico

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

- 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'

Teste de navegador de ponta a ponta

Seu pipeline pode usar ferramentas como Protractor ou Karma para executar testes em navegadores sem cabeça e, em seguida, publicar resultados de testes. Para configurar o teste do navegador e publicar os resultados, siga estas etapas:

Instale um driver de teste de navegador sem cabeça, como o Chrome sem cabeça ou o Firefox sem cabeça, ou uma ferramenta de simulação de navegador, como o PhantomJS, em um agente de build.
Configure o seu framework de teste para usar a opção de navegador ou driver sem interface gráfica, conforme a documentação da ferramenta.
Configure seu framework de teste para gerar resultados de teste formatados pelo JUnit, geralmente com um plug-in de relatório ou configuração.
Adicione um script ou uma tarefa de CLI para iniciar as instâncias do navegador sem cabeça.
Execute os testes de ponta a ponta nas fases do pipeline, juntamente com os testes de unidade.
Publique os resultados junto com os testes de unidade usando a mesma tarefa Publicar resultados do teste .

Empacotamento e entrega

Depois de compilar e testar seu aplicativo, você poderá:

Carregue o resultado da compilação para o Azure Pipelines.
Crie e publique um pacote npm ou Maven.
Empacote a saída de build em um arquivo ZIP para implantação em um aplicativo Web.

Publicar arquivos no Azure Pipelines

Para fazer upload de todo o diretório de trabalho, adicione a tarefa Publicar artefatos de build ao arquivo azure-pipelines.yml.

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

Para fazer upload de um subconjunto de arquivos, primeiro copie os arquivos necessários do diretório de trabalho para um diretório intermediário com a tarefa Copiar arquivos e, em seguida, use a tarefa Publicar artefatos de build.

- 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 projeto for um npm módulo para outros projetos usarem e não for 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 de nome/versão exclusiva, sempre que você publicar.

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

- script: npm publish

O exemplo a seguir publica em um registro personalizado definido no arquivo *.npmrc do seu repositório. Configure uma conexão de serviço do npm para injetar credenciais de autenticação na conexão, à medida que o build é executado.

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

O exemplo a seguir publica o módulo em um feed de gerenciamento de pacotes do Azure DevOps Services.

- 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 versionar meus pacotes npm como parte do processo de build.

Empacotar e implantar um aplicativo Web

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

O exemplo a seguir chama webpack. Para que esse processo funcione, verifique se webpack está configurado como uma dependência de desenvolvimento em seu arquivo de projetopackage.json . Esse script é executado webpack com a configuração padrão, a menos que você tenha um arquivo webpack.config.js na pasta raiz do projeto.

- script: webpack

O exemplo a seguir usa npm run build para chamar o build objeto de script definido no arquivo depackage.json do projeto. O uso do objeto script em seu projeto move a lógica de build para o código-fonte e para fora do pipeline.

- script: npm run build

Você também pode usar a tarefa CLI ou Bash em seu pipeline para invocar sua ferramenta de empacotamento de código, como webpack ou a do Angular ng build.

Para criar um arquivo *.zip que está pronto para publicar 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 Implantar no Serviço de Aplicativo do Azure usando o Azure Pipelines.

Estruturas javaScript

Você pode instalar pacotes em seu pipeline para dar suporte a várias estruturas JavaScript.

Angular

Para aplicativos Angular, você pode executar comandos específicos do Angular, como ng test, ng builde ng e2e. Para usar os comandos da CLI do Angular no seu pipeline, instale o pacote angular/cli npm no agente de build.

YAML
Clássico

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

Observação

Nos agentes do Linux hospedados pela Microsoft, introduza o comando com sudo, como sudo npm install -g.

Para testes no pipeline que exigem a execução de um navegador, como executar o Karma com o ng test comando, use um navegador sem cabeça em vez de um navegador padrão. No aplicativo inicial do Angular:

Altere a entrada browsers no arquivo de projeto karma.conf.js de browsers: ['Chrome'] para browsers: ['ChromeHeadless'].
Altere a entrada singleRun no arquivo de projeto karma.conf.js de false para true. Essa alteração ajuda a garantir que o processo de Karma seja interrompido após a execução.

React e Vue

Todas as dependências para aplicativos React e Vue são capturadas em seu arquivo package.json . Seu arquivo azure-pipelines.yml contém os scripts padrão npm .

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

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

Os arquivos de build estão em uma nova pasta, dist para Vue ou build para React. O exemplo a seguir cria um artefato, wwwque está pronto para lançamento. O pipeline utiliza as tarefas Utilizar Node.js, Copiar arquivo e Publicar artefatos de compilação.

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

Para liberar o aplicativo, aponte sua tarefa de lançamento para o artefato dist ou build e use a tarefa Aplicativo Web do Azure.

Webpack

Você pode usar um arquivo de configuração de webpack para especificar um compilador, como Babel ou TypeScript, para transpilar JavaScript XML (JSX) ou TypeScript para JavaScript sem formatação e para agrupar seu aplicativo.

YAML
Clássico

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

Compilar executores de tarefas

É comum usar Gulp ou Grunt como executores de tarefas para criar e testar aplicativos JavaScript.

Gulp

O Gulp é pré-instalado em agentes hospedados pela Microsoft.

YAML
Clássico

Você pode executar o gulp comando no arquivo de pipeline YAML.

- script: gulp # add any needed options

Se as etapas em seu arquivo gulpfile.js exigirem autenticação com um registro npm, adicione a tarefa de autenticação npm .

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

- script: gulp

Para publicar os resultados do teste JUnit ou xUnit no servidor, adicione a tarefa Publicar resultados do teste .

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

Para publicar os resultados da cobertura de código no servidor, adicione a tarefa Publicar resultados de cobertura de código . Você pode localizar as métricas de cobertura no resumo do build e baixar os relatórios HTML para análise posterior.

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

Grunt

O Grunt é pré-instalado em agentes hospedados pela Microsoft.

YAML
Clássico

Você pode executar o grunt comando no arquivo YAML.

- script: grunt # add any needed options

Se as etapas em seu arquivo Gruntfile.js exigirem autenticação com um registro npm, adicione a tarefa de autenticação npm .

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

- script: grunt

Resolução de problemas

Se você puder criar seu projeto em seu computador de desenvolvimento, mas não puder compilá-lo no Azure Pipelines, explore as possíveis causas e ações corretivas a seguir.

Verifique se as versões do Node.js e do executor de tarefas no computador de desenvolvimento correspondem às do agente.

Você pode incluir scripts de linha de comando, como node --version no pipeline, para verificar as versões instaladas no agente. Use a tarefa de Use Node.js para instalar a mesma versão no agente ou execute comandos de npm install para atualizar as versões das ferramentas.
Se os builds falharem intermitentemente durante a restauração de pacotes, o registro npm pode estar com problemas ou há problemas de rede entre o centro de dados do Azure e o registro. Explore se o uso do Azure Artifacts com um registro npm como fonte upstream melhora a confiabilidade dos seus builds.
Se você estiver usando nvm para gerenciar diferentes versões do Node.js, considere alternar para a tarefa Usar Node.js (UseNode@1 ). nvm é instalado na imagem do macOS por razões históricas. nvm gerencia várias versões Node.js adicionando aliases de shell e alterando PATH, o que interage mal com a maneira como o Azure Pipelines executa cada tarefa em um novo processo. Para obter mais informações, consulte Execuções de pipeline.

A Use Node.js tarefa manipula esse modelo corretamente. No entanto, se seu trabalho exigir o uso nvm, você poderá adicionar o seguinte script ao início de cada pipeline:
```
steps:
- bash: |
    NODE_VERSION=16  # or your preferred version
    npm config delete prefix  # avoid a warning
    . ${NVM_DIR}/nvm.sh
    nvm use ${NODE_VERSION}
    nvm alias default ${NODE_VERSION}
    VERSION_PATH="$(nvm_version_path ${NODE_VERSION})"
    echo "##vso[task.prependPath]$VERSION_PATH"
```
Em seguida, node e outras ferramentas de linha de comando funcionarão para o restante do trabalho de pipeline. Em cada etapa em que você usar o comando nvm, inicie o script com o seguinte código:
```
- bash: |
    . ${NVM_DIR}/nvm.sh
    nvm <command>
```

perguntas frequentes

Como fazer para corrigir uma falha de pipeline com a mensagem 'ERRO FATAL: falha na alocação de CALL_AND_RETRY_LAST - heap javaScript fora da memória'?

Esse tipo de falha ocorre quando o pacote Node.js excede o limite de uso da memória. Para resolver o problema, adicione uma variável como NODE_OPTIONS e atribua-lhe um valor de --max_old_space_size=16384.

Como posso versionar meus pacotes npm durante o processo de construção?

Uma opção é usar uma combinação de controle de versão e versão npm. No final de uma execução de pipeline, você pode atualizar seu repositório com a nova versão. O pipeline YAML a seguir tem um repositório GitHub e o pacote é implantado em npmjs. O build falhará se houver uma incompatibilidade entre a versão do pacote em npmjs e o arquivo package.json .

variables:
    MAP_NPMTOKEN: $(NPMTOKEN) # Mapping secret var

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps: # Checking out connected repo
- checkout: self
  persistCredentials: true
  clean: true
    
- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc
    customEndpoint: 'my-npm-connection'
    
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

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

- script: |
    npm pack
  displayName: 'Package for release'

- bash: | # Grab the package version
    v=`node -p "const p = require('./package.json'); p.version;"`
    echo "##vso[task.setvariable variable=packageVersion]$v"

- task: CopyFiles@2
  inputs:
      contents: '*.tgz'
      targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy archives to artifacts staging directory'

- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1 
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
  displayName: 'Publish npm artifact'

- script: |  # Config can be set in .npmrc
    npm config set //registry.npmjs.org/:_authToken=$(MAP_NPMTOKEN) 
    npm config set scope "@myscope"
    # npm config list
    # npm --version
    npm version patch --force
    npm publish --access public

- task: CmdLine@2 # Push changes to GitHub (substitute your repo)
  inputs:
    script: |
      git config --global user.email "username@contoso.com"
      git config --global user.name "Azure Pipeline"
      git add package.json
      git commit -a -m "Test Commit from Azure DevOps"
      git push -u origin HEAD:main

Para obter mais informações sobre o Azure Artifacts e o serviço de Gerenciamento de Pacotes, consulte o Gerenciamento de Pacotes no Azure Artifacts.
Para obter mais informações sobre tarefas, consulte Tarefas de build, versão e teste.

Comentários

Esta página foi útil?

Last updated on 2025-10-07

Compartilhar via

Pipelines para aplicativos de JavaScript

Instaladores de ferramentas Node.js

Usar várias versões do Node

Instalação da ferramenta de gestão de dependências

Downloads do pacote de dependência

Usar npm

Usar Yarn

Compiladores JavaScript

Teste de unidade

Publicar resultados de teste

Publicar resultados de cobertura de código

Teste de navegador de ponta a ponta

Empacotamento e entrega

Publicar arquivos no Azure Pipelines

Publicar um módulo em um registro npm

Empacotar e implantar um aplicativo Web

Estruturas javaScript

Angular

React e Vue

Webpack

Compilar executores de tarefas

Gulp

Grunt

Resolução de problemas

perguntas frequentes

Como fazer para corrigir uma falha de pipeline com a mensagem 'ERRO FATAL: falha na alocação de CALL_AND_RETRY_LAST - heap javaScript fora da memória'?

Como posso versionar meus pacotes npm durante o processo de construção?

Conteúdo relacionado

Comentários

Recursos adicionais