我如何在 Azure-devops-extension 开发中读取外部 json 文件？

Question

我正在尝试读取项目“index.html”文件中的 json 文件，因为对于 azure devops 扩展我们已经有了 require.js 库，因此想使用相同的它能够在“index.html”文件中导入“config.json”文件。

基本文件结构：
|-index.html
|-静态 |-icon.png
| |-config.json
|-vss-extension.json

我的index.html文件看起来有点像这样：

初始化块

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformScripts: true,
        setupModuleLoader: true,
        moduleLoaderConfig: {
          paths: {
            "Static": "static"
          }
        }
});

需要封禁

VSS.require(
        ["TFS/WorkItemTracking/Services", "Static/config"],
        function (_WorkItemServices, ConfigJson) {

        VSS.ready(function(){
            VSS.register(VSS.getContribution().id, function () {
              return {
                // Called when the active work item is modified
                onFieldChanged: function (args) {
                  console.log(
                    "inside onfield : " +
                      JSON.stringify(ConfigJson)
                  );
                }
                ....
              };
            });

            VSS.notifyLoadSucceeded();
        })
});

我的vss-extension.json文件：

文件块

"files": [
    {
      "path": "static/config.json",
      "addressable": true,
      "contentType": "application/json"
    },
    ....
  ]

我总是收到 require.js 脚本错误：https://requirejs.org/docs/errors.html#scripterror

参考自：

1. https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/vss-extension.json 用于 vss 扩展文件。
2. https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/index.html 对于 index.html

Answer 1

恐怕您无法直接获取json文件的内容。

但您可以尝试使用 HTTP 请求来获取内容。

请参考以下示例：

 onFieldChanged: function (args) {
                        var request = new XMLHttpRequest();
                        request.open('GET', 'config.json', true);
                        request.send(null);
                        request.onreadystatechange = function () {
                            if (request.readyState === 4 && request.status === 200) {
                                var type = request.getResponseHeader('Content-Type');
                                                console.log( "inside onfield : " + JSON.stringify(request.responseText));
                            }
                        }

查看这两张门票了解详情。

Loading a JSON file in a VSTS extension

Answer 2

VSS 是否使用未经修改的 RequireJS？如果是，那么您可以使用 JSON 插件，这将有助于：

https://github.com/millermedeiros/requirejs-plugins

使用起来非常简单，只需要在指定json文件作为依赖时添加前缀json!即可：

VSS.require(
        ["TFS/WorkItemTracking/Services", "json!Static/config"],
        function (_WorkItemServices, ConfigJson) {

        VSS.ready(function(){
            VSS.register(VSS.getContribution().id, function () {
              return {
                // Called when the active work item is modified
                onFieldChanged: function (args) {
                  console.log(
                    "inside onfield : " +
                      JSON.stringify(ConfigJson)
                  );
                }
                ....
              };
            });

            VSS.notifyLoadSucceeded();
        })
});