RequireJS 和 TypeScript 名称.d.ts答案

【问题标题】：RequireJS and TypeScript name.d.tsRequireJS 和 TypeScript 名称.d.ts
【发布时间】：2019-10-22 18:16:42
【问题描述】：

我正在尝试加载其余客户端以在自定义 Azure Devops 仪表板小部件中使用。在Microsoft Documentation 中显示的是

的打字稿示例

import RestClient = require("TFS/WorkItemTracking/RestClient");

// Get an instance of the client
var client = RestClient.getClient();

// Call a method on the client
// e.g. client.getResource(...).then(...);

加载一个休息客户端。我试图按照这个例子，并把我认为应该是一个工作代码的例子放在下面。

但是，当页面加载时，我收到以下错误，

require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

由于某种原因，RequireJS 似乎正在尝试为 tfs.d.ts 文件中定义的类型加载 javascript 文件。

我知道VSS.require() 可以使用，但我想尝试使用文档中显示的格式。

有谁知道我缺少什么或如何更改它以解决使用 RequireJS 加载模块的问题？

编辑

我忘了提，我使用的库叫做VSS Web Extension SDK。我通过 npm 命令安装了它，npm install vss-web-extension-sdk。我尝试将此库与 RequireJS 一起使用的原因是，在 README 的 TypeScript 部分中，它指向使用 AMD 模块。

所需的代码和配置文件

Test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="node_modules/requirejs/require.js" data-main="scripts/config.js"></script>
    </head>
    <body>
        <div class="widget">
            <h2 class="title"></h2>
        </div>
    </body>
</html>

config.js

requirejs.config({
    paths: {
        "VSS": "node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
        "TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts"
    }
});
require(["HelloWorld"]);

注意：当"TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts" 行不存在时，会显示以下错误。

require.js:1961 GET https://localhost:5500/scripts/TFS/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

HelloWorld.ts

VSS.init({                        
    explicitNotifyLoaded: true,
    usePlatformStyles: true
});

import WidgetHelpers = require("TFS/Dashboards/WidgetHelpers");
import RestClient = require("TFS/WorkItemTracking/RestClient");
import { QueryExpand } from "TFS/WorkItemTracking/Contracts";

// Get an instance of the client
var client = RestClient.getClient();
WidgetHelpers.IncludeWidgetStyles();

VSS.register("HelloWorldWidget", function () {                
    return {
        load: function (widgetSettings) {
            var $title = $('h2.title');
            $title.text('Hello World');
            console.log(client.getQueries("Projects", QueryExpand.All));

            return WidgetHelpers.WidgetStatusHelper.Success();
        }
    };
});
VSS.notifyLoadSucceeded();

编译的HelloWorld.js

define(["require", "exports", "TFS/Dashboards/WidgetHelpers", "TFS/WorkItemTracking/RestClient", "TFS/WorkItemTracking/Contracts"], function (require, exports, WidgetHelpers, RestClient, Contracts_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true
    });
    // Get an instance of the client
    var client = RestClient.getClient();
    WidgetHelpers.IncludeWidgetStyles();
    VSS.register("HelloWorldWidget", function () {
        return {
            load: function (widgetSettings) {
                var $title = $('h2.title');
                $title.text('Hello World');
                console.log(client.getQueries("Projects", Contracts_1.QueryExpand.All));
                return WidgetHelpers.WidgetStatusHelper.Success();
            }
        };
    });
    VSS.notifyLoadSucceeded();
});

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "scripts",
        "module": "amd",
        "moduleResolution": "node",
        "types": [
            "vss-web-extension-sdk"
        ]    
    }
}

【问题讨论】：

是什么让您认为 RequireJS 是他们希望您使用的？我点击了您在问题中提供的文档的链接，在那里搜索了“RequireJS”，但没有找到任何结果。
@Louis 说得好。我应该包含更多信息。我假设它使用 RequireJS 作为扩展库的README，在 TypeScript 部分，它显示他们使用的模块是 AMD。经过一些研究，这似乎指向使用 RequireJS。恐怕我对这个库和 TypeScript 还是很陌生，所以如果我错了，请纠正我
@Louis 你知道我做错了什么吗？
我对 RequireJS 非常熟悉，但对 Azure 和 TFS 完全不熟悉。我很确定您需要做的是使用VSS.require 来开始执行您的代码。（请注意，您不需要在 TypeScript 代码中更改对 require 的调用。）不幸的是，我无法轻松测试其中的任何内容，因为我手头没有正确的设置。
@Louis 你说得对，能够使用 VSS.require 来启动扩展运行。感谢您的帮助

标签： javascript typescript azure tfs requirejs

【解决方案1】：

正如Louis所说，这可以通过使用VSS.require来启动一切。

我的代码目前看起来有点像这样。

小部件 HTML 文件。

<head>
    <script src="../lib/VSS_Web_Extension/VSS.SDK.min.js"></script>
    <script src="../compiled_ts/WidgetInit.js"></script>
</head>

WidgetInit.js

// Initialize the VSS sdk
VSS.init({
    explicitNotifyLoaded: true,
    usePlatformScripts: true,
    usePlatformStyles: true
});

// Wait for the SDK to be initialized
VSS.ready(function () {
    //All my other code is in Widget.js and runs fine
    VSS.require(["src/compiled_ts/Widget"]);
});

【讨论】：

谢谢，我花了 3 天时间才让任何图书馆工作。有趣的是 jquery 使用 cdn include 开箱即用，但 jquery.column 仅适用于 require。