Compartir a través de

Desarrollo de una extensión web

Servicios de Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

Use extensiones para mejorar Azure DevOps con nuevas experiencias web, widgets de panel, tareas de compilación y mucho más. Este tutorial le lleva a través de la creación y empaquetado de una extensión web sencilla.

Sugerencia

Para obtener una referencia de trabajo completa, consulte el repositorio azure-devops-extension-sample .

Prerrequisitos

Categoría Requisitos
Permisos Propietario de la organización o miembro del grupo Administradores de la colección de proyectos .
Herramientas - Node.js (se recomienda la versión LTS)
- Herramienta de empaquetado de extensiones: ejecute npm install -g tfx-cli para instalar la CLI de TFX.

Creación de un directorio y un manifiesto

Una extensión es un conjunto de archivos que incluye un archivo de manifiesto necesario. Empaquete la extensión en un archivo .vsix y publíquela en Visual Studio Marketplace.

  1. Cree un directorio para la extensión:

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

  2. Inicialice un manifiesto de paquete de npm:

    npm init -y

  3. Instale el SDK de extensión de Azure DevOps:

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

    Este SDK proporciona API para comunicarse con el marco de host de Azure DevOps.

  4. Cree un archivo de manifiesto de extensión denominado vss-extension.json en la raíz del directorio de extensión con el siguiente contenido:

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

    Importante

    Establezca el campo publisher en su identificador de publicador de Marketplace. La propiedad public controla si la extensión es visible para todos los usuarios de Visual Studio Marketplace. Mantenga las extensiones privadas durante el desarrollo.

  5. Cree un archivo denominado my-hub.html en la raíz del directorio de extensión con el siguiente contenido. Esta página HTML es la vista (centro) que ha contribuido a la experiencia web de 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:

    En este ejemplo se usa RequireJS para cargar el SDK, que funciona sin un paso de compilación. Para las extensiones de producción, use un agrupador como webpack con importaciones de módulos ES (import * as SDK from "azure-devops-extension-sdk") para mejorar el rendimiento. Consulte el ejemplo de extensión para una configuración basada en webpack.

  6. El directorio de extensión debe tener un aspecto similar al del ejemplo siguiente.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    ¿Necesita ayuda? Publique preguntas en la Comunidad de desarrolladores de Azure DevOps Services.

Pasos siguientes

Empaquetado y publicación de la extensión

Contenido relacionado

  • Last updated on