Azure DevOps扩展：集成azure-devops-sdk及调整项目结构方法

一、调整项目结构 #

将原有单文件结构改为标准npm项目结构，便于依赖管理与代码打包：

your-extension/
├── src/
│   └── workitem/
│       ├── button.html  # 原按钮页面文件
│       └── button.js    # 新增，处理SDK初始化、API调用与响应展示逻辑
├── package.json         # 新增，管理npm依赖与构建脚本
├── webpack.config.js    # 可选，用于打包SDK依赖到浏览器可执行文件
└── vss-extension.json   # 原扩展配置文件

二、集成azure-devops-sdk步骤 #

1. 初始化npm项目
   在项目根目录执行：

npm init -y

2. 安装依赖包
   安装SDK核心库、API封装库及打包工具：

npm install azure-devops-extension-sdk azure-devops-extension-api --save
npm install webpack webpack-cli --save-dev

3. 配置Webpack打包规则
   创建webpack.config.js，将SDK与自定义代码打包为浏览器可加载的文件：

const path = require('path');

module.exports = {
  entry: './src/workitem/button.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader' // 可选，需额外安装babel相关包，用于转译ES6+语法
      }
    ]
  }
};

三、修改代码实现响应展示 #

1. 更新button.html #

引入打包后的脚本，确保按钮元素存在：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <button id="apiCallBtn">调用API查看结果</button>
  <!-- 引入打包后的脚本文件 -->
  <script src="../../dist/bundle.js"></script>
</body>
</html>

2. 编写button.js核心逻辑 #

完成SDK初始化、API调用与响应展示的代码编写：

import * as SDK from "azure-devops-extension-sdk";
import { WorkItemFormService } from "azure-devops-extension-api/WorkItemTracking";

// 初始化SDK，必须在所有SDK操作前执行
SDK.init().then(async () => {
  // 获取当前工作项上下文（可选，比如工作项ID）
  const config = SDK.getConfiguration();
  const workItemId = config.workItemId;

  // 绑定按钮点击事件
  const apiBtn = document.getElementById("apiCallBtn");
  apiBtn.addEventListener("click", async () => {
    try {
      // 执行自定义API调用，替换为你的实际请求地址与逻辑
      const response = await fetch(`your-api-endpoint?workItemId=${workItemId}`);
      const responseData = await response.json();

      // 方式1：用SDK弹窗展示响应结果
      await SDK.showDialog({
        title: "API响应结果",
        content: `<pre>${JSON.stringify(responseData, null, 2)}</pre>`,
        width: 600,
        height: 400
      });

      // 方式2：将响应插入到工作项页面（示例：添加到按钮下方）
      // const resultContainer = document.createElement("div");
      // resultContainer.innerHTML = `<h4>API响应</h4><pre>${JSON.stringify(responseData, null, 2)}</pre>`;
      // apiBtn.parentNode.appendChild(resultContainer);

    } catch (error) {
      console.error("API调用失败:", error);
      await SDK.showDialog({
        title: "调用错误",
        content: `API请求出错：${error.message}`,
        width: 400
      });
    }
  });
});

四、更新扩展配置文件（vss-extension.json） #

确保所有文件路径正确，将打包后的dist目录与源码目录加入可访问文件列表：

{
  "manifestVersion": 1,
  "id": "your-unique-extension-id",
  "name": "工作项API调用扩展",
  "version": "1.0.0",
  "publisher": "your-publisher-id",
  "targets": [{"id": "Microsoft.VisualStudio.Services"}],
  "description": "在工作项页面添加按钮，调用API并展示响应结果",
  "categories": ["Work Item Tracking"],
  "contributions": [
    {
      "id": "work-item-api-button",
      "type": "ms.vss-work-web.work-item-form-extension",
      "targets": ["ms.vss-work-web.work-item-form-toolbar"],
      "properties": {
        "name": "调用API",
        "uri": "src/workitem/button.html"
      }
    }
  ],
  "files": [
    {"path": "src/workitem", "addressable": true},
    {"path": "dist", "addressable": true}
  ]
}

五、构建与发布扩展 #

1. 打包代码
   执行npm脚本完成代码打包：

npm run build

2. 打包扩展包
   先安装Azure DevOps扩展工具npm install -g tfx-cli，再执行：

tfx extension create --manifest-globs vss-extension.json

3. 发布扩展
   使用tfx工具发布到Azure DevOps市场，或手动上传到组织的扩展管理页面。

内容的提问来源于stack exchange，提问作者Rithik R