JavaScript 應用程式的處理流程

本文說明 Azure Pipelines 如何與 JavaScript 應用程式搭配使用。 Microsoft託管代理程式會預先安裝常見的 JavaScript 建置、測試和部署工具，例如 npm、Node.js、Yarn 和 Gulp，而不需要您設定任何基礎結構。您也可以設定自我裝載代理程式。

若要快速建立 JavaScript 的管線，請參閱 JavaScript 快速入門。

Node.js 工具安裝程式

若要安裝未預先安裝的 Node.js 和 npm 版本，或在自我裝載代理程式上安裝工具：

針對 npm，請在管線中執行 npm i -g npm@version-number 指令。
如需使用 Node.js，請將 Use Node.js ecosystem v1 (UseNode@1) 工作新增至您的管線。

YAML
傳統

若要安裝特定的 Node.js 版本，請將下列程式碼新增至 azure-pipelines.yml 檔案：

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

注意

每次管線執行時，此工作可能需要大量時間更新至較新的次要版本。 Microsoft 裝載的代理程式會定期更新，因此僅需使用此工作來安裝未預先安裝的特定 Node.js 版本。若要瞭解Microsoft託管代理程式上預先安裝了哪些 Node.js 和 npm 版本，請參閱軟體。

您可以使用 [ 使用 Node.js 生態系統 v1 ] 工作搭配策略 matrix ，在多個版本的 Node.js上建置和測試應用程式。如需詳細資訊，請參閱多任務組態。

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

依賴工具安裝

如果您的專案 package.json 或 package-lock.json 檔案中有開發相依性工具，請透過 npm 安裝工具和相依性。專案檔會定義工具的確切版本，與建置代理程式上存在的其他版本無關。

若要在建置代理程式上安裝這些工具，請在管線中使用指令碼、 npm 工作或命令列工作。

若要使用指令碼：

- script: npm install --only=dev

若要使用 npm 任務：

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

您以這種方式安裝的工具會使用 npm npx 套件執行器，它會偵測其 PATH 解析中的工具。下列範例會呼叫 mocha 測試執行器，並使用開發相依性版本，而不是透過 npm install -g全域安裝的版本。

- script: npx mocha

若要安裝專案所需的工具，這些工具未在 package.json中設定為開發相依性，請從管線中的指令碼呼叫 npm install -g 。下列範例會使用安裝最新版的 npm。然後，管線中的其他腳本可以使用 Angular ng 命令。

- script: npm install -g @angular/cli

注意

在Microsoft裝載的 Linux 代理程式上，使用 sudo前置命令，例如 sudo npm install -g。

這些工具安裝任務會在每次流程執行時進行，因此請注意它們對建置時間的影響。如果額外負荷嚴重影響組建效能，請考慮使用預先設定好所需工具版本的自託管代理程式。

注意

這些工具安裝任務會在每次流程執行時進行，因此請注意它們對建置時間的影響。

相依性套件下載

您可以使用 Yarn 或 Azure Artifacts，從您在 *.npmrc 檔案中指定的公用 npm 登錄或私人 npm 登錄下載套件。若要指定 npm 登錄，請將其 URL 新增至程式碼儲存庫中的 *.npmrc 檔案。

使用 npm

您可以使用 npm 透過下列方式在管線中下載建置套件：

對於無需身份驗證即可下載套件的最簡單方法，請直接執行 npm install.
若要使用已驗證的登錄，請新增 npm 工作。
若要從任務執行器 Gulp、Grunt 或 Maven 內部執行 npm install ，請使用 npm authenticate 工作。

注意

如果您的 npm 摘要使用驗證，您必須在 Azure DevOps 專案設定的 [服務] 索引標籤上建立 npm 服務連線，以管理其認證。

若要直接安裝 npm 套件，請在 azure-pipelines.yml 中使用下列指令碼。如果您的建置代理程式不需要開發相依性，您可以將選項--only=prod新增至 npm install 來加快建置時間。

- script: npm install --only=prod

若要使用 *.npmrc 檔案中指定的專用登錄，請將工作新增至 Npm@1azure-pipelines.yml。

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

若要透過工作執行器（例如 Gulp）將登錄憑證傳遞至 npm 命令，請在呼叫工作執行器之前將工作新增至 npmAuthenticate@0azure-pipelines.yml 。

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

注意

由 Microsoft 託管的代理程式會為每次組建使用新的機器。還原相依性可能需要大量時間。若要緩解此問題，您可以使用 Azure Artifacts 或自託管代理程式搭配套件快取。

如果您在從 npm 登錄還原套件時，因為連線問題而偶爾會失敗，您可以使用 Azure Artifacts 搭配上游來源來快取套件。 Azure Artifacts 會自動使用管線的認證，這些認證通常衍生自 專案集合組建服務 帳戶。

注意

還原相依性可能需要大量時間。若要緩解此問題，您可以使用 Azure Artifacts 或自託管代理程式搭配套件快取。

使用 Yarn

使用腳本安裝 Yarn 以恢復依賴關係。 Yarn 預先安裝在某些 Microsoft 裝載的代理程式上。您可以像任何其他工具一樣在自託管代理程式上安裝和設定 Yarn。

- script: yarn install

您也可以在管道中使用 CLI 或 Bash 工作來叫用 Yarn。

JavaScript編譯器

JavaScript 應用程式使用 Babel 和 TypeScripttsc 編譯器等編譯器將原始程式碼轉換為 Node.js 運行時或 Web 瀏覽器中可用的版本。如果您在專案 package.json 檔案中設定了腳本物件來執行編譯器，您可以在管線中叫用它。

- script: npm run compile

您也可以使用指令碼直接從管線呼叫編譯器。這些命令會從複製原始碼儲存庫的根目錄執行。

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

如果您的專案 package.json 定義了編譯腳本，您可以使用 npm 任務來建置程式碼。如果您未定義編譯腳本，您可以使用 Bash 工作來編譯程式碼。

單元測試

您可以配置管線來執行 JavaScript 測試，以便它們以 JUnit XML 格式產生結果。然後，您可以使用「發佈測試結果」工作來發佈結果。

如果您的測試架構不支援 JUnit 輸出，請透過合作夥伴報告模組（例如 mocha-junit-reporter）新增支援。您可以更新測試 Script 以使用 JUnit 報告器，或如果報告器支援指令行選項，則將這些選項傳遞至作業定義。

下表列出最常用的測試執行器和可用來產生 XML 結果的報告程式：

測試執行器	XML 報告的報告器
摩卡	莫查-朱尼特-記者賽普拉斯-多記者
茉莉花	茉莉花-記者
Jest	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Ava	tap-xunit

下列範例會使用 mocha-junit-reporter ，並使用腳本直接叫 mocha test 用。此指令碼會在預設位置 ./test-results.xml產生 JUnit XML 輸出。

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

如果您在專案的test package.json 檔案中定義了指令碼，您可以使用來呼叫它。

- script: npm test

發佈測試結果

若要發佈測試結果，請使用 [發佈測試結果] 工作。

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

發佈程式代碼涵蓋範圍結果

如果您的測試指令碼執行程式碼涵蓋範圍工具（例如 Istanbul），請新增發佈程式碼涵蓋範圍結果工作。然後，您可以在組建摘要中查看涵蓋範圍指標，並下載 HTML 報告以進行進一步分析。

該任務需要 Cobertura 或 JaCoCo 報告輸出。請確定您的程式碼涵蓋範圍工具使用必要的選項來執行，以產生正確的輸出，例如 --report cobertura。

YAML
傳統

下列範例使用 Istanbul 命令列介面 nyc 以及 mocha-junit-reporter，並呼叫 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'

端對端瀏覽器測試

您的管線可以使用 Protractor 或 Karma 等工具在無頭瀏覽器中執行測試，然後發佈測試結果。若要設定瀏覽器測試和發佈結果，請遵循下列步驟：

在建置代理程式上安裝無頭瀏覽器測試驅動程式，例如無頭 Chrome 或 Firefox，或者安裝瀏覽器模擬工具，例如 PhantomJS。
根據工具的文檔，配置您的測試框架以使用您的無頭瀏覽器或驅動程序選項。
配置測試框架以輸出 JUnit 格式的測試結果，通常使用報告器插件或配置。
新增指令碼或 CLI 工作來啟動無頭瀏覽器的執行個體。
在管線階段以及單元測試中執行端對端測試。
使用相同的 [發佈測試結果] 工作，將結果與單元測試一起發佈。

包裝和交付

建置並測試應用程式後，您可以：

將組建輸出上傳至 Azure Pipelines。
建立並發佈 npm 或 Maven 套件。
將建置輸出封裝成 ZIP 封存，以部署至 Web 應用程式。

將檔案發佈至 Azure Pipelines

若要上傳整個工作目錄，請將 [發佈建置成品] 工作新增至您的 azure-pipelines.yml 檔案。

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

若要上傳檔案子集，請先使用「複製檔案」工作，將必要的檔案從工作目錄複製到預備目錄，然後使用「發佈建置構件」工作。

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

- task: PublishBuildArtifacts@1

將模組發佈至 npm 登錄

如果您的專案輸出是 npm 供其他專案使用的模組，而且不是 Web 應用程式，請使用 npm 工作將模組發佈至本機登錄或公用 npm 登錄。每次發佈時，請提供唯一的名稱/版本組合。

下列範例會使用指令碼發佈至公用 npm 登錄。此範例假設您透過版本控制中的 package.json 檔案來管理版本資訊，例如 npm 版本。

- script: npm publish

下列範例會發佈至存放庫的 *.npmrc 檔案中定義的自訂登錄。設定 npm 服務連線，以在組建執行時將驗證認證插入連線。

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

下列範例會將模組發佈至 Azure DevOps Services 套件管理摘要。

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

如需版本設定和發佈 npm 套件的詳細資訊，請參閱發佈 npm 套件和如何在建置程序中對 npm 套件進行版本控制。

封裝和部署 Web 應用程式

您可以將應用程式封裝，將所有具有中繼輸出和相依性的模組捆綁成可供部署的靜態資產。在編譯和測試後添加一個管道階段以運行 webpack 或 Angular CLI ng 構建等工具。

下列範例會呼叫 webpack。若要讓此程式運作，請確定 webpack 已在 package.json 專案檔中設定為開發相依性。此指令碼 webpack 會以預設組態執行，除非您在專案的根資料夾中有 webpack.config.js 檔案。

- script: webpack

下列範例用 npm run build 來呼叫 build 專案 package.json 檔案中定義的指令碼物件。在專案中使用指令碼物件，會將建置邏輯移至原始程式碼中，並移出管線。

- script: npm run build

您也可以在管線中使用 CLI 或 Bash 任務來叫用封裝工具，例如 webpack 或 Angular 的 ng build。

若要建立已準備好發佈至 Web 應用程式的 *.zip 檔案封存，請使用 [封存檔案] 工作。

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

若要將此封存發佈至 Web 應用程式，請參閱使用 Azure Pipelines 部署至 Azure App Service。

JavaScript 框架

您可以在管線中安裝套件，以支援各種 JavaScript 架構。

Angular

對於 Angular 應用程式，您可以執行 Angular 特定的命令，例如 ng test、 ng build和 ng e2e。若要在管線中使用 Angular CLI 命令，請在組建代理程式上安裝 angular/cli npm 套件。

YAML
傳統

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

注意

在Microsoft裝載的 Linux 代理程式上，使用 sudo前置命令，例如 sudo npm install -g。

對於管線中需要瀏覽器才能執行的測試，例如執行 Karma 的 ng test 命令，建議使用無介面瀏覽器，而非使用標準瀏覽器。在 Angular 入門應用程式中：

將browserskarma.conf.js項目檔中的項目從 browsers: ['Chrome'] 變更為 browsers: ['ChromeHeadless']。
將singleRunkarma.conf.js項目檔中的項目從 false 變更為 true。此變更有助於確保 Karma 程序在執行後停止。

React 和 Vue

React 和 Vue 應用程式的所有依賴項都捕獲在您的 package.json 檔案中。您的 azure-pipelines.yml 檔案包含標準 npm 指令碼。

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

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

建置檔案位於新資料夾中，Vue 的 dist 或 React 的建置。下列範例會建置已準備好發行的成品 www。管線會使用使用 Node.js、複製檔案和發布建置成品工作。

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

若要發行應用程式，請將發行工作指向 dist 或 build 成品，並使用 Azure Web 應用程式任務。

Webpack

您可以使用 webpack 組態檔來指定編譯器（例如 Babel 或 TypeScript）、將 JavaScript XML （JSX）或 TypeScript 轉譯為純 JavaScript，以及捆綁您的應用程式。

YAML
傳統

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

建置工作執行器

通常使用 Gulp 或 Grunt 作為任務執行器來建置和測試 JavaScript 應用程式。

Gulp

Gulp 預先安裝在 Microsoft 裝載的代理程式上。

YAML
傳統

您可以在 YAML 管線檔案中執行命令 gulp 。

- script: gulp # add any needed options

如果 gulpfile.js 檔案中的步驟需要使用 npm 登錄進行驗證，請新增 npm authenticate 工作。

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

- script: gulp

若要將 JUnit 或 xUnit 測試結果發佈至伺服器，請新增 [發佈測試結果] 工作。

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

若要將程式碼涵蓋面結果發佈至伺服器，請新增 [發佈程式碼涵蓋面結果] 工作。您可以在組建摘要中找到涵蓋範圍計量，也可以下載 HTML 報表以進行進一步分析。

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

Grunt

Grunt 預先安裝在 Microsoft 裝載的代理程式上。

YAML
傳統

您可以在 YAML 檔案中執行命令 grunt 。

- script: grunt # add any needed options

如果 Gruntfile.js 檔案中的步驟需要使用 npm 登錄進行驗證，請新增 npm authenticate 工作。

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

- script: grunt

故障排除

如果您可以在開發計算機上建置專案，但無法在 Azure Pipelines 中建置專案，請探索下列潛在原因和更正動作。

檢查開發電腦上的 Node.js 和工作執行器版本是否與代理程式上的版本相符。

您可以包含命令列指令碼，例如 node --version 在管線中，以檢查代理程式上安裝的版本。使用 Use Node.js 工作在代理程式上安裝相同的版本，或執行 npm install 命令來更新工具版本。
如果您的組建在還原套件時偶爾失敗，可能是 npm 註冊表出現問題，或是在 Azure 資料中心與註冊表之間的網絡上有問題。探索是否將 Azure Artifacts 與 npm 登錄搭配使用，作為上游來源可改善組建的可靠性。
如果您用 nvm 來管理不同版本的 Node.js，請考慮改用「使用 Node.js （UseNode@1）」工作。 nvm 因應歷史考量安裝於 macOS 映像檔上。 nvm 通過新增 shell 別名並改變 PATH 來管理多個 Node.js 版本，這與 Azure Pipelines 在新程序中執行每個任務的方式不太兼容。如需詳細資訊，請參閱管線運行。

任務會 Use Node.js 正確處理此模型。不過，如果您的工作需要使用 nvm，您可以將下列指令碼新增至每個管線的開頭：
```
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"
```
然後， node 和其他命令行工具適用於管線作業的其餘部分。在您使用命令的每個步驟 nvm 中，使用下列程式代碼啟動文稿：
```
- bash: |
    . ${NVM_DIR}/nvm.sh
    nvm <command>
```

FAQ

如何修正管線失敗，並顯示訊息「致命錯誤：CALL_AND_RETRY_LAST配置失敗 - JavaScript 堆積記憶體不足」？

當 Node.js 套件超過記憶體使用量限制時，就會發生此失敗類型。若要解決此問題，請新增變數 like NODE_OPTIONS 並為其指派值 --max_old_space_size=16384。

如何在建置過程中對我的 npm 套件進行版本控制？

一種選擇是結合使用版本控制和 npm version。在管線執行結束時，您可以使用新版本來更新存放庫。下列 YAML 管線具有 GitHub 存放庫，而套件會部署至 npmjs。如果 npmjs 上的套件版本與 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

如需 Azure Artifacts 和套件管理服務的詳細資訊，請參閱 Azure Artifacts 中的套件管理。
如需工作的詳細資訊，請參閱建置、發行和測試工作。

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-10-07