Dela via

Utveckla ett webbtillägg

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

Använd tillägg för att förbättra Azure DevOps med nya webbupplevelser, instrumentpanelswidgetar, bygguppgifter med mera. I den här handledningen vägleds du genom att skapa och paketera ett enkelt webbtillägg.

Tips

En komplett referens finns i lagringsplatsen azure-devops-extension-sample.

Förutsättningar

Kategori Krav
behörigheter Organisationsägare eller medlem i gruppen Projektsamlingsadministratörer .
Verktyg - Node.js (LTS-version rekommenderas)
– Paketeringsverktyg för tillägg: Kör npm install -g tfx-cli för att installera TFX CLI.

Skapa en katalog och ett manifest

Ett tillägg är en uppsättning filer som innehåller en obligatorisk manifestfil. Paketera tillägget i en .vsix-fil och publicera det på Visual Studio Marketplace.

  1. Skapa en katalog för tillägget:

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

  2. Initiera ett npm-paketmanifest:

    npm init -y

  3. Installera SDK för Azure DevOps-tillägget:

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

    Det här SDK:t tillhandahåller API:er för att kommunicera med Azure DevOps värdram.

  4. Skapa en tilläggsmanifestfil med namnet vss-extension.json i roten i tilläggskatalogen med följande innehåll:

    {
    "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"
        }
    ]
}

    Viktigt!

    publisher Ange fältet till ditt Marketplace-utgivar-ID. Egenskapen public styr om tillägget är synligt för alla på Visual Studio Marketplace. Håll dina tillägg privata under utvecklingen.

  5. Skapa en fil med namnet my-hub.html i roten i tilläggskatalogen med följande innehåll. Den här HTML-sidan är den vy (hubb) som har bidragit till Azure DevOps-webbupplevelsen.

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

    Anmärkning

    I det här exemplet används RequireJS för att läsa in SDK:t, som fungerar utan ett byggsteg. För produktionstillägg använder du en paketerare som webpack med importer av ES-moduler (import * as SDK from "azure-devops-extension-sdk") för bättre prestanda. Se tilläggsexemplet för en webpack-baserad konfiguration.

  6. Tilläggskatalogen bör se ut som i följande exempel.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Behöver du hjälp? Skicka frågor till Azure DevOps Services Developer Community.

Nästa steg

Paketera och publicera tillägget

Relaterat innehåll

  • Last updated on