Entwickeln einer Weberweiterung
Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019 | TFS 2018
Verwenden Sie Erweiterungen, um Azure DevOps mit neuen Weboberflächen, Dashboard Widgets, Buildaufgaben und mehr zu verbessern. Sie können Erweiterungen mit Standardtechnologien wie HTML, JavaScript und CSS entwickeln. In diesem Tutorial erfahren Sie, wie Sie eine Weberweiterung für Azure DevOps erstellen.
Tipp
Sehen Sie sich die Erweiterungsbeispiele und die neueste Dokumentation zur Erweiterungsentwicklung mit dem Azure DevOps-Erweiterungs-SDK an.
Voraussetzungen
Sie benötigen die folgenden Berechtigungen und Installationen.
- Sie müssen ein Organisationsbesitzer sein. Wenn Sie über keine organization verfügen, können Sie kostenlos eine organization erstellen.
- Installieren Sie Node.js.
- Installieren Sie das Erweiterungspakettool (Extension Packaging Tool, TFX). Führen Sie
npm install -g tfx-cli
von einer Eingabeaufforderung aus, die Sie später zum Verpacken der Erweiterung verwenden.
Erstellen eines Verzeichnisses und Manifests
Eine Erweiterung besteht aus einer Reihe von Dateien, die eine erforderliche Manifestdatei enthalten. Sie packen sie in eine VSIX-Datei und veröffentlichen sie im Visual Studio Marketplace.
Erstellen Sie ein Verzeichnis, in dem die dateien gespeichert werden, die für Ihre Erweiterung benötigt werden:
mkdir my-first-extension
Initialisieren Sie in diesem Verzeichnis ein neues npm-Paketmanifest:
npm init -y
In dieser Datei werden die Bibliotheken beschrieben, die für Ihre Erweiterung erforderlich sind.
Installieren Sie das Microsoft VSS Web Extension SDK-Paket, und speichern Sie es in Ihrem npm-Paketmanifest:
npm install azure-devops-extension-sdk --save
Dieses SDK enthält eine JavaScript-Bibliothek, die APIs bereitstellt, die für die Kommunikation mit der Seite erforderlich sind, in die Ihre Erweiterung eingebettet ist.
Erstellen Sie eine Erweiterungsmanifestdatei namens
vss-extension.json
im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit folgendem Inhalt:{ "manifestVersion": 1, "id": "my-first-extension", "publisher": "", "version": "1.0.0", "name": "My First Extension", "description": "A sample Visual Studio Services 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" } ] }
Hinweis
Die
public
-Eigenschaft steuert, ob die Erweiterung für alle Benutzer im Visual Studio Marketplace sichtbar ist. Halten Sie Ihre Erweiterungen während der Entwicklung privat.Erstellen Sie im Stammverzeichnis Ihres Erweiterungsverzeichnisses eine Datei mit dem Namen
my-hub.html
mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) in die Webumgebung eingebunden ist.<!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) { if (typeof SDK !== 'undefined') { console.log("SDK is defined. Trying to initialize..."); SDK.init(); SDK.ready().then(() => { console.log("SDK is ready"); document.getElementById("name").innerText = SDK.getUser().displayName; }); } else { console.log('SDK is not defined'); } }); </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>
Ihr Erweiterungsverzeichnis sollte wie im folgenden Beispiel aussehen.
|-- my-hub.html |-- node_modules |-- @types |-- azure-devops-extension-sdk |-- package.json |-- vss-extension.json
Nächste Schritte
Verwandte Artikel
Feedback
https://aka.ms/ContentUserFeedback.
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Tickets als Feedbackmechanismus für Inhalte auslaufen lassen und es durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter:Feedback senden und anzeigen für