Přizpůsobení JavaScriptu pro Azure Pipelines

Pokud potřebujete verzi Node.js a npm, která ještě není nainstalovaná v agentovi hostovaném Microsoftem, použijte úlohu instalačního programu nástroje Node. Do souboru přidejte následující fragment kódu azure-pipelines.yml .

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

Pokud potřebujete verzi Node.js/npm, která ještě není v agentovi nainstalovaná:

1. V kanálu vyberte Úkoly, zvolte fázi, ve které se spouští úlohy sestavení, a pak vyberte + , jestli chcete do této fáze přidat nový úkol.

2. V katalogu úloh vyhledejte a přidejte úlohu instalačního programu nástroje Node Tool.

3. Vyberte úlohu a zadejte verzi modulu runtime Node.js, který chcete nainstalovat.

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

Viz spouštění s více konfiguracemi.

Pokud máte nástroje, které jsou ve vašem projektu package.json nebo package-lock.json souboru závislé na vývoji, nainstalujte nástroje a závislosti prostřednictvím npm. Přesná verze nástrojů se definuje v projektu a je izolovaná od ostatních verzí, které existují v agentu sestavení.

Použijte skript nebo úlohu npm.

Použití skriptu k instalaci s package.json

- script: npm install --only=dev

Použití úlohy npm k instalaci s package.json

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

Spusťte nástroje nainstalované tímto způsobem pomocí spouštěče balíčků npm npx , který rozpozná nástroje nainstalované tímto způsobem v jeho řešení cesty. Následující příklad volá mocha spouštěč testů, ale před použitím globálně nainstalované verze (prostřednictvím npm install -g) vyhledá verzi nainstalovanou jako vývojovou závislost.

- script: npx mocha

Pokud chcete nainstalovat nástroje, které váš projekt potřebuje, ale které nejsou nastavené jako vývojové závislosti, package.jsonvolejte npm install -g z fáze skriptu ve vašem kanálu.

Následující příklad nainstaluje nejnovější verzi Angular CLI pomocí npm. Zbytek kanálu pak může nástroj používat ng z jiných script fází.

- script: npm install -g @angular/cli

Pomocí úloh npm nebo příkazového řádku v kanálu nainstalujte nástroje do agenta sestavení.

Chcete-li nainstalovat balíčky npm se skriptem v kanálu, přidejte do azure-pipelines.ymlsouboru následující fragment kódu .

- script: npm install

Chcete-li použít privátní registr zadaný v .npmrc souboru, přidejte do azure-pipelines.ymlsouboru následující fragment kódu .

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

Pokud chcete předat přihlašovací údaje registru příkazům npm prostřednictvím spouštěčů úloh, jako je Gulp, přidejte před voláním spouštěče úloh následující úlohu azure-pipelines.yml .

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

Ke stažení a instalaci balíčků použijte úlohu ověření npm nebo npm v kanálu.

Pokud se sestavení občas nezdaří kvůli problémům s připojením při obnovování balíčků z registru npm, můžete použít Azure Artifacts s upstreamovými zdroji a ukládat balíčky do mezipaměti. Přihlašovací údaje kanálu se automaticky použijí při připojení k Azure Artifacts. Tyto přihlašovací údaje jsou obvykle odvozeny z účtu služby sestavení kolekce projektů.

Pokud používáte agenty hostované Microsoftem, získáte nový počítač při každém spuštění sestavení, což znamená obnovení závislostí pokaždé, což může trvat značné množství času. Pokud chcete zmírnit omezení, můžete použít Azure Artifacts nebo agenta v místním prostředí – získáte výhodu používání mezipaměti balíčků.

K vyvolání Yarn k obnovení závislostí použijte dílčí fázi skriptu. Yarn se předinstaluje na některých agentech hostovaných Microsoftem. Můžete ho nainstalovat a nakonfigurovat na agenty v místním prostředí, jako je jakýkoli jiný nástroj.

- script: yarn install

K vyvolání Yarn použijte úlohu rozhraní příkazového řádku nebo Bash v kanálu.

Pomocí kompilátorů, jako je Babel a kompilátor TypeScripttsc, převeďte zdrojový kód na verze použitelné pro modul runtime Node.js nebo ve webových prohlížečích.

Pokud máte v souboru projektu package.json nastavený objekt skriptu, který spouští kompilátor, vyvoláte ho v kanálu pomocí úlohy skriptu.

- script: npm run compile

Kompilátory můžete volat přímo z kanálu pomocí úlohy skriptu. Tyto příkazy se spouštějí z kořenového adresáře naklonovaného úložiště zdrojového kódu.

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

Pokud máte v projektu definovaný kompilační skript, použijte úlohu npm v kanálu, package.json k sestavení kódu. Pokud nemáte v konfiguraci projektu definovaný samostatný skript, použijte úlohu Bash ke kompilaci kódu.

Nakonfigurujte kanály tak, aby spouštěly testy JavaScriptu tak, aby byly výsledky formátované ve formátu XML JUnit. Výsledky pak můžete publikovat pomocí předdefinované úlohy výsledků testu publikování.

Pokud testovací architektura nepodporuje výstup JUnit, přidejte podporu prostřednictvím modulu pro vytváření sestav partnerů, jako je například mocha-junit-reporter. Testovací skript můžete aktualizovat tak, aby používal reportér JUnit, nebo pokud zpravodaj podporuje možnosti příkazového řádku, předejte tyto možnosti do definice úlohy.

Následující tabulka uvádí nejčastěji používané spouštěče testů a reportéry, které je možné použít k vytváření výsledků XML:

Následující příklad používá mocha-junit-reporter a vyvolá mocha test přímo pomocí skriptu. Tento skript vytvoří výstup XML JUnit ve výchozím umístění ./test-results.xml.

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

Pokud jste v projektu definovali test skript package.json souboru, můžete ho vyvolat pomocí npm test.

- script: npm test

Publikování výsledků testu

K publikování výsledků použijte úlohu Publikovat výsledky testu.

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

Publikování výsledků pokrytí kódu

Pokud vaše testovací skripty spustí nástroj pro pokrytí kódu, například Istanbul, přidejte úlohu Publikovat výsledky pokrytí kódu. Když to uděláte, najdete metriky pokrytí v souhrnu sestavení a stáhnout sestavy HTML pro další analýzu. Úloha očekává výstup generování sestav Cobertura nebo JaCoCo, takže se ujistěte, že se nástroj pro pokrytí kódu spustí s potřebnými možnostmi pro vygenerování správného výstupu. Například --report cobertura.

Následující příklad používá nyc, rozhraní příkazového řádku Istanbul spolu s mocha-junit-reporter a vyvolá npm test příkaz.

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

Pomocí úloh Publikovat výsledky testu a Publikovat výsledky pokrytí kódu v kanálu můžete publikovat výsledky testů spolu s výsledky pokrytí kódu pomocí Istanbulu.

Nastavte možnosti ovládacího prvku pro úlohu Publikovat výsledky testu tak, aby se úloha spustila, i když předchozí úkol selhal, pokud nasazení nebylo zrušeno.

Zabalení aplikací pro zabalení všech aplikačních modulů s průběžnými výstupy a závislostmi do statických prostředků připravených k nasazení Přidejte fázi kanálu po kompilaci a testech, abyste mohli spustit nástroj, jako je webpack nebo ng build , pomocí Angular CLI.

První příklad volání webpack. Pokud chcete tuto práci mít, ujistěte se, že webpack je ve vašem souboru projektu package.json nakonfigurovaná jako vývojová závislost. To se spustí webpack s výchozí konfigurací, pokud nemáte webpack.config.js soubor v kořenové složce projektu.

- script: webpack

Následující příklad používá úlohu npm k volání npm run build objektu skriptu definovaného build v projektu package.json. Použití objektů skriptu v projektu přesune logiku sestavení do zdrojového kódu a z kanálu.

- script: npm run build

Pomocí úlohy CLI nebo Bash v kanálu vyvoláte nástroj pro balení, například webpack Angular ng build.

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

Přidejte do kanálu následující úlohy:

• npm

  • Command: custom
  • Příkaz a argumenty: install -g @angular/cli

• npm

  • Command: install

• udeřit

  • Typ: inline
  • Skript: 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

Přidejte do kanálu následující úlohy:

• npm

  • Command: custom
  • Příkaz a argumenty: install -g webpack webpack-cli --save-dev

• udeřit

  • Typ: inline
  • Skript: npx webpack --config webpack.config.js

Gulp se předinstaluje na agentech hostovaných Microsoftem. gulp Spusťte příkaz v souboru YAML:

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

Pokud kroky v souboru gulpfile.js vyžadují ověření pomocí registru npm:

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

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

Přidejte úlohu Publikovat výsledky testu pro publikování výsledků testu JUnit nebo xUnit na server.

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

Přidejte úlohu Publikovat výsledky pokrytí kódu pro publikování výsledků pokrytí kódu na server. Metriky pokrytí najdete v souhrnu sestavení a můžete si stáhnout sestavy HTML pro další analýzu.

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

Nejjednodušší způsob, jak vytvořit kanál, pokud vaše aplikace používá Gulp, je použít Node.js se šablonou sestavení gulp při vytváření kanálu. Tato šablona automaticky přidá různé úlohy pro vyvolání příkazů Gulp a publikování artefaktů. V úloze vyberte Povolit pokrytí kódu a povolte pokrytí kódu pomocí Istanbulu.

Grunt se předinstaluje na agentech hostovaných Microsoftem. Spuštění příkazu grunt v souboru YAML:

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

Pokud kroky v Gruntfile.js souboru vyžadují ověření pomocí registru npm:

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

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

Nejjednodušší způsob, jak vytvořit kanál, pokud vaše aplikace používá Grunt, je použít Node.js se šablonou sestavení Grunt při vytváření kanálu. Tím se automaticky přidají různé úlohy pro vyvolání příkazů Gulp a publikování artefaktů. V úloze vyberte možnost Publikovat do SADY TFS/Team Services a publikujte výsledky testů a výběrem možnosti Povolit pokrytí kódu povolte pokrytí kódu pomocí Istanbulu.

Publikování souborů do Azure Pipelines

Pokud chcete nahrát celý pracovní adresář souborů, použijte úlohu Publish Build Artifacts (Publikovat artefakty sestavení) a do azure-pipelines.yml souboru přidejte následující položky.

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

Pokud chcete nahrát podmnožinu souborů, nejprve zkopírujte potřebné soubory z pracovního adresáře do přípravného adresáře pomocí úlohy Kopírovat soubory a pak použijte úlohu Publikovat artefakty sestavení.

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

- task: PublishBuildArtifacts@1

Publikování modulu do registru npm

Pokud je npm výstupem projektu modul pro použití jinými projekty a ne webovou aplikací, použijte úlohu npm k publikování modulu do místního registru nebo do veřejného registru npm. Při každém publikování zadejte jedinečnou kombinaci názvu nebo verze.

Příklady

První příklad předpokládá, že spravujete informace o verzi (například prostřednictvím verze npm) prostřednictvím změn package.json v souboru ve správě verzí. Následující příklad používá úlohu skriptu k publikování do veřejného registru.

- script: npm publish

Další příklad se publikuje do vlastního registru definovaného .npmrc v souboru úložiště. Nastavte připojení ke službě npm tak, aby při spuštění sestavení vložil ověřovací přihlašovací údaje do připojení.

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

Poslední příklad publikuje modul do kanálu správy balíčků Azure DevOps Services.

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

Další informace o správě verzí a publikování balíčků npm najdete v tématu Publikování balíčků npm a jak můžu v rámci procesu sestavení vytvářet verze balíčků npm?

Nasazení webové aplikace

Pokud chcete vytvořit archiv souborů .zip, který je připravený k publikování do webové aplikace, použijte úlohu Archivovat soubory :

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

Pokud chcete tento archiv publikovat do webové aplikace, podívejte se na nasazení webové aplikace Azure.

Publikování artefaktů do Azure Pipelines

Pomocí úlohy Publikovat artefakty sestavení publikujte soubory z sestavení do Azure Pipelines.

Publikování do registru npm

K vytvoření a publikování balíčku npm použijte úlohu npm. Další informace o správě verzí a publikování balíčků npm naleznete v tématu Publikování balíčků npm.

Nasazení webové aplikace

K vytvoření .zip archivu souborů, který je připravený k publikování do webové aplikace, použijte úlohu Archivovat soubory. Pokud chcete tento archiv publikovat do webové aplikace, přečtěte si téma Nasazení webové aplikace Azure.

Sestavení a nahrání image do registru kontejneru

Po úspěšném sestavení zdrojového kódu a úspěšné a úspěšné testy jednotek můžete také sestavit image a odeslat ji do registru kontejneru.