Web uzantısı geliştirme

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

Azure DevOps'yi yeni web deneyimleri, pano pencere öğeleri, derleme görevleri ve daha fazlası ile geliştirmek için uzantıları kullanın. Bu öğretici, basit bir web uzantısı oluşturma ve paketleme konusunda size yol gösterir.

Bahşiş

Tam çalışan başvuru örneği için azure-devops-extension-sample deposuna bakın.

Önkoşullar

Kategori Gereksinimler
İzinler Kuruluş sahibi veya Proje Koleksiyonu Yöneticileri grubunun üyesi.
Araçlar - Node.js (LTS sürümü önerilir)
- Uzantı paketleme aracı: npm install -g tfx-cli yüklemek için komutunu çalıştırın.

Dizin ve bildirim oluşturma

Uzantı, gerekli bildirim dosyasını içeren bir dosya kümesidir. Uzantıyı bir .vsix dosyasına paketleyin ve Visual Studio Market'te yayımlayın.

  1. Uzantınız için bir dizin oluşturun:

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

  2. Npm paket bildirimini başlatın:

    npm init -y

  3. Azure DevOps Uzantısı SDK'sını yükleyin:

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

    Bu SDK, Azure DevOps konak çerçevesiyle iletişim kurmak için API'ler sağlar.

  4. Uzantı dizininizin kökünde aşağıdaki içeriğe sahip vss-extension.json adlı bir uzantı bildirim dosyası oluşturun:

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

    Önemli

    publisher Alanı Pazaryeri yayımcı kimliğiniz olarak ayarlayın. public özelliği, uzantının Visual Studio Market'te herkes tarafından görünür olup olmadığını denetler. Geliştirme sırasında uzantılarınızı gizli tutun.

  5. Aşağıdaki içeriğe sahip uzantı dizininizin kökünde adlı my-hub.html bir dosya oluşturun. Bu HTML sayfası, Azure DevOps web deneyimine katkıda bulunan görünümdür (hub).

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

    Uyarı

    Bu örnekte, derleme adımı olmadan çalışan SDK'yı yüklemek için RequireJS kullanılır. Üretim uzantıları için daha iyi performans için ES modül içeri aktarmaları () ile import * as SDK from "azure-devops-extension-sdk" gibi bir paketleyici kullanın. Web paketi tabanlı kurulum için uzantı örneğine bakın.

  6. Uzantı dizininiz aşağıdaki örnekteki gibi görünmelidir.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Yardıma mı ihtiyacınız var? Azure DevOps Services Geliştirici Topluluğuüzerinden sorularınızı gönderin.

Sonraki adım

Uzantınızı Paketleme ve Yayımlama

İlgili içerik

  • Last updated on