从 React 应用程序创建 Azure Devops Web 扩展答案

【问题标题】：Creating a Azure Devops web extension from a React application从 React 应用程序创建 Azure Devops Web 扩展
【发布时间】：2020-08-09 23:10:10
【问题描述】：

我希望通过 React 应用程序在 Azure Devops 中创建一个 Web 扩展。

在this 教程中看到，有一个名为my-hub.html 的文件，它是扩展程序的起始页。

按照上面链接中的步骤，我能够创建一个 Web 扩展程序来打印登录用户，就像 my-hub.html 一样，document.getElementById("name").innerText = VSS.getWebContext().user.name;。

但是，我使用 Typescript 在 React 中编写了我的应用程序，并且起始文件是 App.tsx。有人可以建议我如何指示vss-extension.json 文件从App.tsx 文件加载扩展名吗？

{
    "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/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

我需要将 React 应用程序转换为 html 页面吗？

【问题讨论】：

如果直接将起始页替换为 App.tsx 会怎样？根据文档，扩展是使用 HTML、JavaScript 和 CSS 等标准技术开发的。这个好像不行。
嗨 tubby，我注意到我的同事在that ticket 分享了解决方法，请查看，如果您有任何问题，请随时在这里分享。

标签： azure-devops single-page-application babeljs azure-devops-extensions

【解决方案1】：

您可以先部署 React 应用程序，然后在 html 文件中添加应用程序/网站链接。像这样：

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">;
<head>
    <script src="lib/VSS.SDK.min.js"></script>
    <style>
        body {
            background-color: rgb(100, 100, 100);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
        });
    </script>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
<p>Hello. This is a link to <a href="https://www.google.com">React App</a>?<br />
Just click to navigate to it</p>
</body>
</html>

如果您想将 React 应用程序直接与扩展程序集成，请参考 this example。

【讨论】：