共用方式為

開發 Web 擴充功能

Azure DevOps 服務 |Azure DevOps Server |Azure DevOps Server 2022

使用擴充功能透過新的 Web 體驗、儀錶板小工具、建置工作等等來增強 Azure DevOps。 這個教學會帶你如何建立並打包一個簡單的網頁擴充功能。

提示

完整工作參考，請參見 azure-devops-extension-sample 儲存庫。

先決條件

類別 需求
許可 組織擁有者或專案收藏管理員群組的成員。
工具 - Node.js （建議LTS版本）
- 擴充套件打包工具：執行 npm install -g tfx-cli 以安裝 TFX CLI。

建立目錄和清單

擴充功能是一組包含必要清單檔案的檔案。 將擴充套件打包成 .vsix 檔案，並發佈到 Visual Studio 市集。

  1. 為你的擴充功能建立目錄：

    mkdir my-first-extension && cd my-first-extension

  2. 初始化 npm 套件清單：

    npm init -y

  3. 安裝 Azure DevOps 擴充套件 SDK：

    npm install azure-devops-extension-sdk --save

    此 SDK 提供與 Azure DevOps 主機框架通訊的 API。

  4. 使用下列內容，在擴充目錄的根目錄建立名為 vss-extension.json 的擴充指令清單檔案：

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Azure DevOps extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    這很重要

    將 publisher 欄位設定為你的 Marketplace 出版商 ID。 public 屬性可控制Visual Studio Marketplace 上每個人是否可以看到延伸模組。 在開發期間讓您的延伸模組保持隱私。

  5. 在擴充功能的根目錄內建立一個名為my-hub.html的檔案，內容如下。 這個 HTML 頁面是 Azure DevOps 網頁體驗中貢獻的視圖（樞紐）。

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            SDK.init();
            SDK.ready().then(function () {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

    備註

    這個範例使用 RequireJS 載入 SDK，無需建置步驟即可運作。 對於生產擴充，可以使用像 webpack 這樣的捆綁器，並匯入 ES 模組（）import * as SDK from "azure-devops-extension-sdk"以提升效能。 請參閱 webpack 架構的 擴充範例 。

  6. 您的延伸模組目錄看起來應該像下列範例。

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    需要協助嗎？ 將問題張貼至 Azure DevOps Services 開發人員社群。

後續步驟

封裝併發佈延伸模組

相關內容

  • Last updated on