Přizpůsobení JavaScriptu pro Azure Pipelines

Azure Pipelines můžete použít k vytváření javascriptových aplikací, aniž byste museli nastavovat vlastní infrastrukturu. Nástroje, které běžně používáte k sestavování, testování a spouštění javascriptových aplikací , jako jsou npm, Node, Yarn a Gulp, získáte předinstalované na agentech hostovaných Microsoftem v Azure Pipelines.

Verze Node.js a npm, která je předinstalovaná, najdete v agentech hostovaných Microsoftem. Pokud chcete nainstalovat konkrétní verzi těchto nástrojů na agenty hostované Microsoftem, přidejte na začátek procesu úlohu Instalační program nástroje Node Tool. Můžete také použít agenta v místním prostředí .

Pokud chcete vytvořit první kanál pomocí JavaScriptu, prohlédněte si rychlé zprovoznění JavaScriptu.

Použití konkrétní verze Node.js

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 .

Poznámka:

Hostovaní agenti se pravidelně aktualizují a nastavením této úlohy strávíte významnou dobu aktualizací na novější podverzi při každém spuštění kanálu. Tuto úlohu použijte pouze v případě, že potřebujete v kanálu konkrétní verzi uzlu.

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

Pokud chcete aktualizovat jenom nástroj npm, spusťte npm i -g npm@version-number příkaz v procesu sestavení.

Použití více verzí uzlů

Aplikaci můžete sestavit a otestovat na více verzích Node pomocí úlohy instalačního programu nástroje Node.

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

Instalace nástrojů na agenta sestavení

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 pomocí package.json

- script: npm install --only=dev

Použití úlohy npm k instalaci pomocí 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í.

Poznámka:

Na agentech Linuxu hostovaných Microsoftem si před příkazem předvádět sudo, například sudo npm install -g.

- script: npm install -g @angular/cli

Tip

Tyto úlohy se spouštějí při každém spuštění kanálu, takže mějte na paměti, jaký vliv má instalace nástrojů na časy sestavení. Zvažte konfiguraci agentů v místním prostředí s verzí nástrojů, které potřebujete, pokud se režie stane vážným dopadem na výkon sestavení.

Správa závislostí

V sestavení pomocí Yarn nebo Azure Artifacts stáhněte balíčky z veřejného registru npm. Tento registr je typ privátního registru npm, který zadáte v .npmrc souboru.

Použití npm

Npm můžete použít následujícími způsoby ke stažení balíčků pro sestavení:

• Přímo se spustí npm install ve vašem kanálu, protože je to nejjednodušší způsob, jak stáhnout balíčky z registru bez ověřování. Pokud vaše sestavení nepotřebuje ke spuštění vývojových závislostí na agentovi, můžete urychlit časy sestavení s --only=prod možností npm install.
• Použijte úlohu npm. Tato úloha je užitečná, když používáte ověřený registr.
• Použijte úlohu npm Authenticate. Tento úkol je užitečný při spuštění npm install ze spouštěčů úkolů – Gulp, Grunt nebo Maven.

Pokud chcete zadat registr npm, vložte adresy URL do .npmrc souboru v úložišti. Pokud se váš informační kanál ověří, vytvořte připojení služby npm na kartě Služby v nastaveních Projectu a spravujte jeho přihlašovací údaje.

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>

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ů.

Použití příze Yarn

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

Spuštění javascriptových kompilátorů

Pomocí kompilátorů, jako je Babel a kompilátor TypeScripttsc , převeďte zdrojový kód na verze použitelné modulem 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

Spuštění testů jednotek

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:

Test runner	Reportery pro vytváření sestav XML
Mocha	mocha-junit-reporter cypress-multi-reportery
Jasmine	jasmine-reportéři
jest	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Ava	tap-xunit

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 souboru package.json projektu definovali test skript, 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'

Kompletní testování prohlížeče

Testy můžete spouštět v bezoblehlých prohlížečích jako součást kanálu pomocí nástrojů, jako je Protractor nebo Karma. Výsledky sestavení pak publikujte do Azure DevOps pomocí následujícího postupu:

1. Nainstalujte na agenta sestavení bezobrazový testovací ovladač prohlížeče, jako je bezobrazový Chrome nebo Firefox, nebo nástroj napodobování prohlížeče, jako je Například HelloJS.
2. Nakonfigurujte testovací architekturu tak, aby v souladu s dokumentací nástroje používala možnost bezobsadového prohlížeče nebo ovladače podle vašeho výběru.
3. Nakonfigurujte testovací architekturu (obvykle s modulem plug-in nebo konfigurací reporteru) pro výstup výsledků testů ve formátu JUnit.
4. Nastavte úlohu skriptu tak, aby spouštěla všechny příkazy rozhraní příkazového řádku potřebné ke spuštění bezobjemných instancí prohlížeče.
5. Spusťte kompletní testy ve fázích kanálu spolu s testy jednotek.
6. Výsledky publikujte pomocí stejné úlohy Publikovat výsledky testů společně s testy jednotek.

Zabalení webových aplikací

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 v 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 souboru project 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

Implementace javascriptových architektur

Angular

Pro aplikace Angular můžete zahrnout příkazy specifické pro Angular, jako je například ng test, ng build a ng e2e. Pokud chcete ve svém kanálu použít příkazy Angular CLI, nainstalujte do agenta sestavení balíček npm angular/cli.

Poznámka:

Na agentech Linuxu hostovaných Microsoftem si před příkazem předvádět sudo, například sudo npm install -g.

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

Pro testy v kanálu, které vyžadují spuštění prohlížeče, například příkaz ng test v úvodní aplikaci, která spouští Karma, použijte místo standardního prohlížeče bezobjemový prohlížeč. V úvodní aplikaci Angular:

1. browsers Změňte položku v souboru projektu karma.conf.js z browsers: ['Chrome'] na browsers: ['ChromeHeadless'].

2. singleRun Změňte položku v souboru projektu karma.conf.js z hodnoty false na true. Tato změna pomáhá zajistit, aby se proces Karma po spuštění zastavil.

React a Vue

Všechny závislosti pro aplikace React a Vue se zaznamenávají v souboru package.json . Váš soubor azure-pipelines.yml obsahuje standardní skript Node.js:

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

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

Soubory sestavení jsou v nové složce dist (pro Vue) nebo build (pro React). Tento fragment kódu sestaví artefakt – www který je připravený k vydání. Používá instalační program uzlu, kopírovat souborya publikovat úlohy artefaktů sestavení.

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

Pokud ho chcete uvolnit, nasměrujte úlohu vydání na dist artefakt nebo build artefakt a použijte úlohu Nasazení webové aplikace Azure.

Webpack

Konfigurační soubor webpacku můžete použít k určení kompilátoru, jako je Babel nebo TypeScript, k transpilování JSX nebo TypeScriptu do prostého JavaScriptu a k vytvoření balíčku aplikace.

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

Sestavení spouštěčů úloh

K sestavení a testování javascriptové aplikace se běžně používá Gulp nebo Grunt jako spouštěč úloh.

Gulp

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'

Grunt

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

Zabalení a doručení kódu

Po sestavení a otestování aplikace můžete nahrát výstup sestavení do Azure Pipelines, vytvořit a publikovat balíček npm nebo Maven nebo zabalit výstup sestavení do souboru .zip pro nasazení do webové aplikace.

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 souboru .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.

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.

Odstraňování potíží

Pokud můžete projekt sestavit na vývojovém počítači, ale máte potíže s jeho sestavením v Azure Pipelines, prozkoumejte následující možné příčiny a opravné akce:

• Zkontrolujte, jestli verze Node.js a spouštěč úloh na vývojovém počítači odpovídají verzím agenta. Můžete zahrnout skripty příkazového řádku, například node --version do kanálu, abyste zkontrolovali, co je nainstalované v agentu. Buď pomocí instalačního programu nástrojů node (jak je vysvětleno v těchto doprovodných materiálech) nasaďte stejnou verzi agenta, nebo spusťte npm install příkazy pro aktualizaci požadovaných verzí nástrojů.

• Pokud se sestavení při obnovování balíčků přerušovaně nezdaří, dochází k problémům s registrem npm nebo dochází k problémům se sítí mezi datovým centrem Azure a registrem. Tyto faktory nemůžeme ovládat. Prozkoumejte, jestli použití Azure Artifacts s registrem npm jako nadřazeného zdroje zlepšuje spolehlivost sestavení.

• Pokud používáte nvm ke správě různých verzí Node.js, zvažte místo toho přepnutí na úlohu instalačního programu nástroje Node Tool. (nvm je nainstalován z historických důvodů na imagi macOS.) nvm spravuje více verzí Node.js přidáním aliasů prostředí a změnou PATH, která špatně komunikuje se způsobem, jakým Azure Pipelines spouští jednotlivé úlohy v novém procesu.

  Úloha instalačního programu nástroje Node Zpracovává tento model správně. Pokud ale vaše práce vyžaduje použití nvm, můžete na začátek každého kanálu přidat následující skript:

  steps:
  - bash: |
      NODE_VERSION=16  # or whatever your preferred version is
      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"
  

  node Potom a další nástroje příkazového řádku fungují pro zbytek úlohy kanálu. V každém kroku, ve kterém příkaz použijete nvm , spusťte skript následujícím kódem:

  - bash: |
      . ${NVM_DIR}/nvm.sh
      nvm <command>
  

Často kladené dotazy

Otázka: Kde se dozvím další informace o Azure Artifacts a službě Správa balíčků?

A: Správa balíčků v Azure Artifacts

Otázka: Kde najdu další informace o úkolech?

A: Sestavování, vydávání a testování úloh

Otázka: Návody opravit selhání kanálu se zprávou ZÁVAŽNÁ CHYBA: CALL_AND_RETRY_LAST Přidělení selhalo – halda JavaScriptu je mimo paměť?

A: K tomuto typu selhání dochází, když balíček Node.js překročí limit využití paměti. Pokud chcete tento problém vyřešit, přidejte proměnnou NODE_OPTIONS jako a přiřaďte jí hodnotu --max_old_space_size=16384.

Otázka: Jak můžu v rámci procesu sestavení vytvářet verze balíčků npm?

A: Jednou z možností je použití kombinace správy verzí a verze npm. Na konci spuštění kanálu můžete úložiště aktualizovat novou verzí. V tomto YAML je úložiště GitHub a balíček se nasadí do npmjs. Sestavení selže v případě neshody mezi verzí balíčku v npmjs a souborem 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