Webes bővítmény fejlesztése

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

Bővítmények használatával továbbfejleszti az Azure DevOps-t új webes felületekkel, irányítópult-widgetekkel, buildelési feladatokkal és egyebekkel. Ez az oktatóanyag végigvezeti egy egyszerű webes bővítmény létrehozásán és csomagolásán.

Borravaló

A teljes munka referenciáját az azure-devops-extension-sample adattárban talál.

Előfeltételek

Kategória Követelmények
Jogosultságok A projektcsoportgazdák csoport szervezettulajdonosa vagy tagja.
Eszközök - Node.js (LTS-verzió ajánlott)
- Bővítménycsomagoló eszköz: Futtassa npm install -g tfx-cli a TFX CLI telepítéséhez.

Címtár és jegyzék létrehozása

A bővítmény olyan fájlok készlete, amelyek egy szükséges jegyzékfájlt tartalmaznak. Csomagolja be a bővítményt egy .vsix-fájlba, és tegye közzé a Visual Studio Marketplace-en.

  1. Hozzon létre egy könyvtárat a bővítményhez:

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

  2. NPM-csomagjegyzék inicializálása:

    npm init -y

  3. Telepítse az Azure DevOps Extension SDK-t:

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

    Ez az SDK API-kat biztosít az Azure DevOps gazdagépkerettel való kommunikációhoz.

  4. Hozzon létre egy vss-extension.json nevű kiterjesztésjegyzékfájlt a bővítménykönyvtár gyökerében a következő tartalommal:

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

    Fontos

    Állítsa be a publisher mezőt a Marketplace-közzétevő azonosítójához. A public tulajdonság szabályozza, hogy a bővítmény látható-e a Visual Studio Marketplace-en mindenki számára. A fejlesztés során tartsa magánjellegűnek a bővítményeket.

  5. Hozz létre egy my-hub.html nevű fájlt a bővítménykönyvtár gyökerénél az alábbi tartalommal. Ez a HTML-oldal az Azure DevOps webes környezetéhez integrált nézet (központi csomópont).

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

    Megjegyzés:

    Ez a példa a RequireJS használatával tölti be az SDK-t, amely buildelési lépés nélkül működik. Éles bővítmények esetén használjon egy csomagkötegetőt, például a webpackot ES-modulimportálással (import * as SDK from "azure-devops-extension-sdk") a jobb teljesítmény érdekében. Tekintse meg a webpack-alapú beállítás bővítménymintáját .

  6. A bővítménykönyvtárnak az alábbi példához hasonlóan kell kinéznie.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Segítségre van szüksége? Kérdéseket tehet fel a Azure DevOps Services fejlesztői közösségének.

Következő lépés

Bővítmény csomagolása és közzététele

Kapcsolódó tartalom

  • Last updated on