Personalizzare JavaScript per Azure Pipelines

Se è necessaria una versione di Node.js e npm che non è già installata nell'agente ospitato da Microsoft, usare l'attività di installazione dello strumento Node. Aggiungere il frammento di codice seguente al azure-pipelines.yml file.

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

Se è necessaria una versione di Node.js/npm che non è già installata nell'agente:

1. Nella pipeline selezionare Attività, scegliere la fase che esegue le attività di compilazione e quindi selezionare + per aggiungere una nuova attività a tale fase.

2. Nel catalogo attività trovare e aggiungere l'attività Programma di installazione dello strumento Node.

3. Selezionare l'attività e specificare la versione del runtime Node.js da installare.

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

Vedere Esecuzione di più configurazioni.

Se si dispone di strumenti che sono dipendenze di sviluppo nel progetto package.json o package-lock.json nel file, installare gli strumenti e le dipendenze tramite npm. La versione esatta degli strumenti viene definita nel progetto, isolata da altre versioni esistenti nell'agente di compilazione.

Usare uno script o l'attività npm.

Usare uno script per l'installazione con package.json

- script: npm install --only=dev

Usare l'attività npm da installare con package.json

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

Eseguire gli strumenti installati in questo modo usando lo strumento di esecuzione del pacchetto npm npx , che rileva gli strumenti installati in questo modo nella risoluzione del percorso. L'esempio seguente chiama il mocha test runner, ma cerca la versione installata come dipendenza di sviluppo prima di usare una versione installata a livello globale (tramite npm install -g) .

- script: npx mocha

Per installare gli strumenti necessari per il progetto, ma che non sono impostati come dipendenze di sviluppo in package.json, chiamare npm install -g da una fase di script nella pipeline.

Nell'esempio seguente viene installata la versione più recente dell'interfaccia della riga di comando di Angular usando npm. Il resto della pipeline può quindi usare lo ng strumento da altre script fasi.

- script: npm install -g @angular/cli

Usare le attività npm o della riga di comando nella pipeline per installare gli strumenti nell'agente di compilazione.

Per installare pacchetti npm con uno script nella pipeline, aggiungere il frammento di codice seguente a azure-pipelines.yml.

- script: npm install

Per usare un registro privato specificato nel .npmrc file, aggiungere il frammento di codice seguente a azure-pipelines.yml.

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

Per passare le credenziali del Registro di sistema ai comandi npm tramite strumenti di esecuzione attività, ad esempio Gulp, aggiungere l'attività seguente a azure-pipelines.yml prima di chiamare lo strumento di esecuzione attività.

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

Usare l'attività di autenticazione npm o npm nella pipeline per scaricare e installare i pacchetti.

Se le compilazioni hanno occasionalmente esito negativo a causa di problemi di connessione quando si ripristinano pacchetti dal registro npm, è possibile usare Azure Artifacts con origini upstream e memorizzare nella cache i pacchetti. Le credenziali della pipeline vengono usate automaticamente quando ci si connette ad Azure Artifacts. Queste credenziali vengono in genere derivate dall'account del servizio di compilazione raccolta progetti.

Se si usano agenti ospitati da Microsoft, si ottiene un nuovo computer ogni volta che si esegue una compilazione, ovvero il ripristino delle dipendenze ogni volta, che può richiedere una quantità significativa di tempo. Per attenuare il problema, è possibile usare Azure Artifacts o un agente self-hosted, quindi si ottiene il vantaggio di usare la cache dei pacchetti.

Usare una fase di script per richiamare Yarn per ripristinare le dipendenze. Yarn viene preinstallato in alcuni agenti ospitati da Microsoft. È possibile installarlo e configurarlo in agenti self-hosted come qualsiasi altro strumento.

- script: yarn install

Usare l'interfaccia della riga di comando o l'attività Bash nella pipeline per richiamare Yarn.

Usare compilatori come Babel e il compilatore TypeScript tsc per convertire il codice sorgente in versioni utilizzabili dal runtime Node.js o nei Web browser.

Se nel file di progetto package.json è configurato un oggetto script che esegue il compilatore, richiamarlo nella pipeline usando un'attività script.

- script: npm run compile

È possibile chiamare i compilatori direttamente dalla pipeline usando l'attività script. Questi comandi vengono eseguiti dalla radice del repository del codice sorgente clonato.

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

Usare l'attività npm nella pipeline se nel progetto è definito uno script di compilazione package.json per compilare il codice. Usare l'attività Bash per compilare il codice se non è definito uno script separato nella configurazione del progetto.

Configurare le pipeline per eseguire i test JavaScript in modo che producano risultati formattati nel formato XML JUnit. È quindi possibile pubblicare i risultati usando l'attività predefinita pubblica risultati dei test.

Se il framework di test non supporta l'output JUnit, aggiungere il supporto tramite un modulo di creazione di report partner, ad esempio mocha-junit-reporter. È possibile aggiornare lo script di test per usare il reporter JUnit o se il reporter supporta le opzioni della riga di comando, passare tali opzioni nella definizione dell'attività.

Nella tabella seguente sono elencati i testrunner più comunemente usati e i reporter che possono essere usati per produrre risultati XML:

Nell'esempio seguente viene usato mocha-junit-reporter e viene richiamato mocha test direttamente usando uno script. Questo script genera l'output XML JUnit nel percorso predefinito di ./test-results.xml.

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

Se è stato definito uno test script nel file di package.json del progetto, è possibile richiamarlo usando npm test.

- script: npm test

Pubblica risultati dei test

Per pubblicare i risultati, usare l'attività Pubblica risultati test.

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

Pubblicare i risultati del code coverage

Se gli script di test eseguono uno strumento di code coverage, ad esempio Istanbul, aggiungere l'attività Pubblica risultati code coverage. In questo caso, è possibile trovare le metriche di copertura nel riepilogo della compilazione e scaricare i report HTML per ulteriori analisi. L'attività prevede l'output di creazione di report Cobertura o JaCoCo, quindi assicurarsi che lo strumento di code coverage venga eseguito con le opzioni necessarie per generare l'output corretto. Ad esempio: --report cobertura.

L'esempio seguente usa nyc, l'interfaccia della riga di comando di Istanbul, insieme a mocha-junit-reporter e richiama il npm test 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'

Usare le attività Pubblica risultati test e Pubblica risultati code coverage nella pipeline per pubblicare i risultati dei test insieme ai risultati del code coverage usando Istanbul.

Impostare le opzioni di controllo per l'attività Pubblica risultati test per eseguire l'attività anche se un'attività precedente non è riuscita, a meno che la distribuzione non sia stata annullata.

Creare un pacchetto di applicazioni per aggregare tutti i moduli dell'applicazione con output intermedi e dipendenze in asset statici pronti per la distribuzione. Aggiungere una fase della pipeline dopo la compilazione e i test per eseguire uno strumento come webpack o compilazione usando l'interfaccia della riga di comando di Angular.

Il primo esempio chiama webpack. Per eseguire questa operazione, assicurarsi che webpack sia configurata come dipendenza di sviluppo nel file di progetto package.json. Questa operazione viene eseguita webpack con la configurazione predefinita, a meno che non si disponga di un webpack.config.js file nella cartella radice del progetto.

- script: webpack

Nell'esempio seguente viene usata l'attività npm per chiamare npm run build l'oggetto build script definito nel progetto package.json. L'uso di oggetti script nel progetto sposta la logica per la compilazione nel codice sorgente e all'esterno della pipeline.

- script: npm run build

Usare l'interfaccia della riga di comando o l'attività ng buildBash nella pipeline per richiamare lo strumento di creazione pacchetti, ad esempio webpack o Angular.

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

Aggiungere le attività seguenti alla pipeline:

• npm

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

• npm

  • Comando: install

• bash

  • Tipo: inline
  • Copione: 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

Aggiungere le attività seguenti alla pipeline:

• npm

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

• bash

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

Gulp viene preinstallato sugli agenti ospitati da Microsoft. Eseguire il gulp comando nel file YAML:

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

Se i passaggi nel file gulpfile.js richiedono l'autenticazione con un registro npm:

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

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

Aggiungere l'attività Pubblica risultati test per pubblicare i risultati del test JUnit o xUnit nel server.

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

Aggiungere l'attività Pubblica risultati code coverage per pubblicare i risultati del code coverage nel server. È possibile trovare le metriche di copertura nel riepilogo della compilazione ed è possibile scaricare i report HTML per ulteriori analisi.

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

Il modo più semplice per creare una pipeline se l'app usa Gulp consiste nell'usare il Node.js con il modello di compilazione gulp quando si crea la pipeline. Questo modello aggiunge automaticamente varie attività per richiamare i comandi Gulp e pubblicare elementi. Nell'attività selezionare Abilita code coverage per abilitare il code coverage usando Istanbul.

Grunt viene preinstallato sugli agenti ospitati da Microsoft. Per eseguire il comando grunt nel file YAML:

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

Se i passaggi nel Gruntfile.js file richiedono l'autenticazione con un registro npm:

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

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

Il modo più semplice per creare una pipeline se l'app usa Grunt consiste nell'usare il Node.js con il modello di compilazione Grunt quando si crea la pipeline. In questo modo vengono aggiunte automaticamente varie attività per richiamare i comandi Gulp e pubblicare gli artefatti. Nell'attività selezionare l'opzione Pubblica in TFS/Team Services per pubblicare i risultati dei test e selezionare Abilita code coverage per abilitare il code coverage usando Istanbul.

Pubblicare file in Azure Pipelines

Per caricare l'intera directory di lavoro dei file, usare l'attività Pubblica elementi di compilazione e aggiungere quanto segue al azure-pipelines.yml file.

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

Per caricare un subset di file, copiare prima i file necessari dalla directory di lavoro in una directory di staging con l'attività Copia file e quindi usare l'attività Pubblica artefatti di compilazione.

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

- task: PublishBuildArtifacts@1

Pubblicare un modulo in un registro npm

Se l'output del progetto è un npm modulo da usare da altri progetti e non da un'applicazione Web, usare l'attività npm per pubblicare il modulo in un registro locale o nel registro npm pubblico. Specificare una combinazione di nome/versione univoca ogni volta che si pubblica.

Esempi

Il primo esempio presuppone che le informazioni sulla versione (ad esempio tramite una versione npm) vengano gestite tramite le modifiche apportate al package.json file nel controllo della versione. Nell'esempio seguente viene usata l'attività script per pubblicare nel Registro di sistema pubblico.

- script: npm publish

Nell'esempio seguente viene pubblicato in un registro personalizzato definito nel file del .npmrc repository. Configurare una connessione al servizio npm per inserire le credenziali di autenticazione nella connessione durante l'esecuzione della compilazione.

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

L'esempio finale pubblica il modulo in un feed di gestione pacchetti di Azure DevOps Services.

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

Per altre informazioni sul controllo delle versioni e sulla pubblicazione di pacchetti npm, vedere Pubblicare pacchetti npm e Come è possibile eseguire la versione dei pacchetti npm come parte del processo di compilazione?

Distribuire un'app Web

Per creare un archivio di file .zip pronto per la pubblicazione in un'app Web, usare l'attività Archivia file :

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

Per pubblicare questo archivio in un'app Web, vedere Distribuzione di app Web di Azure.

Pubblicare elementi in Azure Pipelines

Usare l'attività Pubblica artefatti di compilazione per pubblicare i file dalla compilazione in Azure Pipelines.

Pubblicare in un registro npm

Per creare e pubblicare un pacchetto npm, usare l'attività npm. Per altre informazioni sul controllo delle versioni e sulla pubblicazione di pacchetti npm, vedere Pubblicare pacchetti npm.

Distribuire un'app Web

Per creare un archivio di file .zip pronto per la pubblicazione in un'app Web, usare l'attività Archivia file. Per pubblicare questo archivio in un'app Web, vedere Distribuzione di app Web di Azure.

Creare ed eseguire il push di un'immagine nel registro contenitori

Dopo aver compilato correttamente il codice sorgente e aver completato correttamente gli unit test, è anche possibile compilare un'immagine ed eseguirne il push in un registro contenitori.