Bagikan melalui

Mengembangkan ekstensi web

Layanan Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Gunakan ekstensi untuk meningkatkan Azure DevOps dengan pengalaman web baru, widget dasbor, tugas build, dan banyak lagi. Tutorial ini membawa Anda melalui pembuatan dan pengemasan ekstensi web sederhana.

Tips

Untuk referensi kerja lengkap, lihat repositori azure-devops-extension-sample.

Prasyarat

Kategori Persyaratan
Izin Pemilik organisasi atau anggota grup Administrator Koleksi Proyek .
Alat - Node.js (versi LTS direkomendasikan)
- Alat pengemasan ekstensi: Jalankan npm install -g tfx-cli untuk menginstal TFX CLI.

Buat direktori dan daftar

Ekstensi adalah sekumpulan file yang menyertakan file manifes yang diperlukan. Kemas ekstensi ke dalam file .vsix dan terbitkan ke Visual Studio Marketplace.

  1. Buat direktori untuk ekstensi Anda:

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

  2. Menginisialisasi manifes paket npm:

    npm init -y

  3. Pasang SDK Ekstensi Azure DevOps:

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

    SDK ini menyediakan API untuk berkomunikasi dengan bingkai host Azure DevOps.

  4. Buat file manifes ekstensi bernama vss-extension.json di akar direktori ekstensi Anda dengan konten berikut:

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

    Penting

    Atur bidang tersebut ke publisherID penerbit Marketplace Anda. Properti public mengontrol apakah ekstensi terlihat oleh semua orang di Visual Studio Marketplace. Pastikan ekstensi Anda tetap rahasia selama pengembangan.

  5. Buat file bernama my-hub.html di akar direktori ekstensi Anda dengan konten berikut. Halaman HTML ini adalah tampilan (hub) yang dikontribusikan ke dalam pengalaman web 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>

    Nota

    Contoh ini menggunakan RequireJS untuk memuat SDK, yang berfungsi tanpa langkah build. Untuk ekstensi produksi, gunakan bunder seperti paket web dengan impor modul ES (import * as SDK from "azure-devops-extension-sdk") untuk performa yang lebih baik. Lihat sampel ekstensi untuk penyiapan berbasis webpack.

  6. Direktori ekstensi Anda akan terlihat seperti contoh berikut.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Butuh bantuan? Ajukan pertanyaan ke Komunitas Pengembang Azure DevOps Services .

Langkah berikutnya

Kemasi dan terbitkan ekstensi Anda

Konten terkait

  • Last updated on