azure-devops - 从 React 应用程序创建 Azure Devops Web 扩展
问题描述
我希望通过 React 应用程序在 Azure Devops 中创建一个 Web 扩展。
如本教程中所见,有一个名为 的文件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 页面吗?
解决方案
您可以先部署 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 应用程序直接与扩展程序集成,请参考此示例。
推荐阅读
- php - 预选下拉列表选项的幻想框
- c++ - 如何将 R 数据类型转换为 Eigen::Matrix
在这个情况下? - authentication - How to store user data in an MVC 5 app ? (with Windows auth)
- excel - How to save each sheet as a separate workbook except sheet 1?
- python - Segmentation Fault while reading parquet file from AWS S3 using read_parquet in Python Pandas
- java - Java SQLException SQL0901 and AS400 MCH1210 errors
- amazon-web-services - Why AWS cognito asks me to which appclient to use everytime?
- postgresql - Aggregate results based on array of strings in JSON?
- excel - VBA CopyPicture fails on locked screen ("error 1004 cannot empy clipboard")
- jquery - 在jQuery中单击相应按钮后如何向上或向下移动li项目?