Personnaliser JavaScript pour Azure Pipelines

Si vous avez besoin d’une version de Node.js et de npm qui n’est pas déjà installée sur l’agent hébergé par Microsoft, utilisez la tâche d’installation de l’outil Node. Ajoutez l’extrait de code suivant à votre fichier azure-pipelines.yml.

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

Si vous avez besoin d’une version de Node.js/npm qui n’est pas déjà installée sur l’agent :

1. Dans le pipeline, sélectionnez Tâches, choisissez la phase qui exécute vos tâches de build, puis + pour ajouter une nouvelle tâche à cette phase.

2. Dans le catalogue de tâches, recherchez et ajoutez la tâche Programme d’installation de l’outil Node.

3. Sélectionnez la tâche et spécifiez la version du runtime Node.js que vous souhaitez installer.

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

Consultez Exécution multiconfiguration.

Si vous avez des outils qui sont des dépendances de développement dans le fichier package.json ou package-lock.json de votre projet, installez vos outils et dépendances via npm. La version exacte des outils est définie dans le projet, isolée des autres versions qui existent sur l’agent de build.

Utilisez un script ou la tâche npm.

Utiliser un script pour installer avec package.json

- script: npm install --only=dev

Utiliser la tâche npm pour installer avec package.json

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

Exécutez les outils installés de cette façon à l’aide de l’exécuteur de package npm npx, qui détecte les outils installés de cette façon dans sa résolution de chemin. L’exemple suivant appelle l’exécuteur de test mocha, mais recherche la version installée en tant que dépendance de développement avant d’utiliser une version installée globalement (via npm install -g).

- script: npx mocha

Pour installer des outils dont votre projet a besoin, mais qui ne sont pas définis en tant que dépendances de développement dans package.json, appelez npm install -g à partir d’une phase de script dans votre pipeline.

L’exemple suivant installe la dernière version de l’interface CLI Angular à l’aide de npm. Le reste du pipeline peut ensuite utiliser l’outil ng à partir d’autres phases script.

- script: npm install -g @angular/cli

Utilisez les tâches npm ou de ligne de commande dans votre pipeline pour installer des outils sur votre agent de build.

Pour installer des packages npm avec un script dans votre pipeline, ajoutez l’extrait de code suivant à azure-pipelines.yml.

- script: npm install

Pour utiliser un registre privé spécifié dans votre fichier .npmrc, ajoutez l’extrait de code suivant à azure-pipelines.yml.

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

Pour passer les informations d’identification du Registre aux commandes npm via des exécuteurs de tâches, comme Gulp, ajoutez la tâche suivante à azure-pipelines.yml avant d’appeler l’exécuteur de tâche.

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

Utilisez la tâche npm ou npm authenticate dans votre pipeline pour télécharger et installer des packages.

Si vos builds échouent parfois en raison de problèmes de connexion lorsque vous restaurez des packages à partir du registre npm, vous pouvez utiliser Azure Artifacts avec les sources en amont et mettre en cache les packages. Les informations d’identification du pipeline sont automatiquement utilisées lorsque vous vous connectez à Azure Artifacts. Ces informations d’identification sont généralement dérivées du compte de service de build de collection de projets.

Si vous utilisez des agents hébergés par Microsoft, vous obtenez une nouvelle machine chaque fois que vous exécutez une build, ce qui signifie que vous restaurez les dépendances à chaque fois, ce qui peut prendre beaucoup de temps. Pour atténuer les problèmes, vous pouvez utiliser Azure Artifacts ou un agent auto-hébergé. Vous bénéficiez ainsi de l’utilisation du cache de package.

Utilisez une phase de script pour appeler Yarn afin de restaurer les dépendances. Yarn est préinstallé sur certains agents hébergés par Microsoft. Vous pouvez l’installer et le configurer sur des agents auto-hébergés comme n’importe quel autre outil.

- script: yarn install

Utilisez l’interface CLI ou la tâche Bash dans votre pipeline pour appeler Yarn.

Utilisez des compilateurs tels que Babel et le compilateur TypeScript tsc pour convertir votre code source en versions utilisables par le runtime Node.js ou dans les navigateurs web.

Si vous avez configuré un objet de script dans votre fichier projet package.json qui exécute votre compilateur, appelez-le dans votre pipeline à l’aide d’une tâche de script.

- script: npm run compile

Vous pouvez appeler des compilateurs directement à partir du pipeline à l’aide de la tâche de script. Ces commandes s’exécutent à partir de la racine du dépôt de code source cloné.

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

Utilisez la tâche npm dans votre pipeline si vous avez un script de compilation défini dans votre projet package.json pour générer le code. Utilisez la tâche Bash pour compiler votre code si vous n’avez pas de script distinct défini dans la configuration de votre projet.

Configurez vos pipelines pour exécuter vos tests JavaScript afin qu’ils produisent des résultats mis en forme au format XML JUnit. Vous pouvez ensuite publier les résultats à l’aide de la tâche intégrée publish test results.

Si votre framework de test ne prend pas en charge la sortie JUnit, ajoutez la prise en charge par le biais d’un module de création de rapports partenaire, comme mocha-junit-reporter. Vous pouvez soit mettre à jour votre script de test pour utiliser le rapporteur JUnit, soit si le rapporteur prend en charge les options de ligne de commande, passer ces options dans la définition de tâche.

Le tableau suivant répertorie les exécuteurs de test et les rapporteurs les plus couramment utilisés pour produire des résultats XML :

L’exemple suivant utilise mocha-junit-reporter et appelle mocha test directement à l’aide d’un script. Ce script produit la sortie XML JUnit à l’emplacement par défaut de ./test-results.xml.

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

Si vous avez défini un script test dans le fichier package.json de votre projet, vous pouvez l’appeler à l’aide de npm test.

- script: npm test

Publier les résultats des tests

Pour publier les résultats, utilisez la tâche Publier les résultats des tests.

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

Publier les résultats de la couverture du code

Si vos scripts de test exécutent un outil de couverture du code, comme Istanbul, ajoutez la tâche Publier les résultats de la couverture du code. Dans ce cas, vous pouvez trouver des métriques de couverture dans le résumé de build et télécharger des rapports HTML pour une analyse plus approfondie. La tâche attend une sortie de création de rapports Cobertura ou JaCoCo. Assurez-vous donc que votre outil de couverture du code s’exécute avec les options nécessaires pour générer la sortie appropriée. Par exemple : --report cobertura.

L’exemple suivant utilise nyc, l’interface de ligne de commande Istanbul, ainsi que la commande mocha-junit-reporter et appelle 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'

Utilisez les tâches Publier les résultats des tests et Publier les résultats de la couverture du code dans votre pipeline pour publier les résultats des tests ainsi que les résultats de la couverture du code à l’aide d’Istanbul.

Définissez les options de contrôle pour la tâche Publier les résultats des tests pour exécuter la tâche même si une tâche précédente a échoué, sauf si le déploiement a été annulé.

Empaquetez des applications pour regrouper tous vos modules d’application avec des sorties et des dépendances intermédiaires dans des ressources statiques prêtes pour le déploiement. Ajoutez une phase de pipeline après votre compilation et vos tests pour exécuter un outil comme webpack ou ng build à l’aide de l’interface CLI Angular.

Le premier exemple appelle webpack. Pour effectuer ce travail, assurez-vous que webpack est configuré en tant que dépendance de développement dans votre fichier projet package.json. Cette opération exécute webpack avec la configuration par défaut, sauf si vous avez un fichier webpack.config.js dans le dossier racine de votre projet.

- script: webpack

L’exemple suivant utilise la tâche npm pour appeler npm run build pour appeler l’objet de script build défini dans le fichier projet package.json. L’utilisation d’objets de script dans votre projet déplace la logique de la build dans le code source et en dehors du pipeline.

- script: npm run build

Utilisez la tâche CLI ou Bash dans votre pipeline pour appeler votre outil d’empaquetage, comme webpack ou ng build d’Angular.

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

Ajoutez les tâches suivantes à votre pipeline :

• npm

  • Commande : custom
  • Commande et arguments : install -g @angular/cli

• npm

  • Commande : install

• bash

  • Type : inline
  • Script : 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

Ajoutez les tâches suivantes à votre pipeline :

• npm

  • Commande : custom
  • Commande et arguments : install -g webpack webpack-cli --save-dev

• bash

  • Type : inline
  • Script : npx webpack --config webpack.config.js

Gulp est préinstallé sur les agents hébergés par Microsoft. Exécutez la commande gulp dans le fichier YAML :

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

Si les étapes de votre fichier gulpfile.js nécessitent une authentification avec un registre npm :

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

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

Ajoutez la tâche Publier les résultats des tests pour publier les résultats des tests JUnit ou xUnit sur le serveur.

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

Ajoutez la tâche Publier les résultats de la couverture du code pour publier les résultats de la couverture du code sur le serveur. Vous trouverez les métriques de couverture dans le résumé de la build, et vous pouvez télécharger des rapports HTML pour une analyse plus approfondie.

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

Le moyen le plus simple de créer un pipeline si votre application utilise Gulp consiste à utiliser le modèle de build Node.js avec gulp lorsque vous créez le pipeline. Ce modèle ajoute automatiquement différentes tâches pour appeler des commandes Gulp et publier des artefacts. Dans la tâche, sélectionnez Activer la couverture du code pour activer la couverture du code à l’aide d’Istanbul.

Grunt est préinstallé sur les agents hébergés par Microsoft. Pour exécuter la commande grunt dans le fichier YAML :

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

Si les étapes de votre fichier Gruntfile.js nécessitent une authentification avec un registre npm :

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

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

Le moyen le plus simple de créer un pipeline si votre application utilise Grunt consiste à utiliser le modèle de build Node.js avec Grunt lorsque vous créez le pipeline. Cela ajoute automatiquement différentes tâches pour appeler des commandes Gulp et publier des artefacts. Dans la tâche, sélectionnez l’option Publier sur TFS/Team Services pour publier les résultats des tests, puis sélectionnez Activer la couverture du code pour activer la couverture du code à l’aide d’Istanbul.

Publier des fichiers sur Azure Pipelines

Pour charger l’intégralité du répertoire de travail des fichiers, utilisez la tâche Publier les artefacts de build et ajoutez ce qui suit à votre fichier azure-pipelines.yml.

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

Pour charger un sous-ensemble de fichiers, copiez d’abord les fichiers nécessaires à partir du répertoire de travail vers un répertoire intermédiaire avec la tâche Copier des fichiers, puis utilisez la tâche Publier les artefacts de build.

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

- task: PublishBuildArtifacts@1

Publier un module dans un registre npm

Si la sortie de votre projet est un module npm à utiliser par d’autres projets et non par une application web, utilisez la tâche npm pour publier le module dans un registre local ou dans le registre npm public. Fournissez une combinaison nom/version unique chaque fois que vous publiez.

Exemples

Le premier exemple suppose que vous gérez les informations de version (par exemple, via une version npm) par le biais des modifications apportées à votre fichier package.json dans le contrôle de version. L’exemple suivant utilise la tâche de script pour publier dans le registre public.

- script: npm publish

L’exemple suivant publie dans un registre personnalisé défini dans le fichier .npmrc de votre dépôt. Configurez une connexion de service npm pour injecter des informations d’identification d’authentification dans la connexion pendant l’exécution de la build.

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

Le dernier exemple publie le module dans un flux de gestion de package Azure DevOps Services.

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

Pour plus d’informations sur le contrôle de version et la publication de packages npm, consultez Publier des packages npm et Comment puis-je gérer les versions de mes packages npm dans le cadre du processus de build ?.

Déployer une application web

Pour créer une archive de fichiers .zip prête pour la publication dans une application web, utilisez la tâche Archiver les fichiers :

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

Pour publier cette archive dans une application web, consultez Déploiement d’applications web Azure.

Publier des artefacts sur Azure Pipelines

Utilisez la tâche Publier des artefacts de build pour publier des fichiers de votre build vers Azure Pipelines.

Publier dans un registre npm

Pour créer et publier un package npm, utilisez la tâche npm. Pour plus d’informations sur le contrôle de version et la publication de packages npm, consultez Publier des packages npm.

Déployer une application web

Pour créer une archive de fichiers .zip prête à être publiée dans une application web, utilisez la tâche Archiver les fichiers. Pour publier cette archive dans une application web, consultez Déploiement d’applications web Azure.

Générer et envoyer une image au registre de conteneurs

Une fois que votre code source a été correctement généré et que vos tests unitaires sont en place et ont réussi, vous pouvez également générer une image et l’envoyer à un registre de conteneurs.