Question

我使用visual-studio-2017在typescript中编写了一个应用层。我还有使用javascript和html构建的Web资源。 Web资源的html使用requirejs在必要时包含已编译的Typescript代码。我看到的问题是我在我的Typescript中使用的相对路径。当我将Web资源发布到Microsoft Dynamics时，RequireJS尝试从我的Typescript相对于html文件而不是相对于已转换的Javascript文件加载相对路径。

的WebAPI

透明化构建/ CCSEQ / WebAPI.js（Model.js位于build / CCSEQ / Model.js）

"use strict";

import * as Model from "./Model.js";

export class WebAPI{
  // Code here
}

main.html中

位于/WebResources/html/Main.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Main</title>   
</head>
<body>
    <script src="require.js" data-main="../js/Main.js"></script>
</body>
</html>

Main.js

位于/WebResources/js/Main.js

"use strict";

// Require fails because it is looking for /WebResources/html/Model.js rather than /build/CCSEQ/Model.js
require(["WebAPI.js"], function(WebApi){
  // Code Here
});

Answer 1

您要做的第一件事就是从您的模块名称（.js电话和require声明）中删除import。您的姓名传入require和define是模块名称。它们看起来像路径，但它们不是真正的路径。 RequireJS使用map，paths和baseUrl配置选项（命名最常用的名称）获取模块名称并将其转换为路径。如果不使用这些选项，则使用合理的默认值。

如果在模块名称中使用.js，则RequireJS假定您传递路径而不是实际模块名称。（如果您使用斜杠启动字符串，使用类似于（foo?blah）的查询参数，或者如果字符串中有冒号，则表示您正在使用协议（例如http://）。）在这种情况下，模块名称没有转换为路径，因此map，paths和baseUrl都被忽略。这是code：

的一部分

        //If a colon is in the URL, it indicates a protocol is used and it is just
        //an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?)
        //or ends with .js, then assume the user meant to use an url and not a module id.
        //The slash is important for protocol-less URLs as well as full paths.
        if (req.jsExtRegExp.test(moduleName)) {
            //Just a plain path, not module name lookup, so just return it.
            //Add extension if it is included. This is a bit wonky, only non-.js things pass
            //an extension, this method probably needs to be reworked.
            url = moduleName + (ext || '');
        } else {

req.jsExtRegExp的值为/^\/|:|\?|\.js$/。

（您可以将.js保留在传递给data-main的值中，因为data-main很特殊。）

此外，您需要执行一些操作，以便require(["WebAPI"]...将解析为正确的路径。您可以通过在RequireJS配置中设置baseUrl来指向包含文件WebAPI.js的目录。或者您可以使用paths：

paths: {
  WebAPI: '../../build/CCSEQ/WebAPI',
}

请注意，密钥WebAPI的值也缺少.js扩展名。你也不能拥有它。值有一个路径（不是模块名称），如果你把.js放在那里就会遇到问题，那就是RequireJS会尝试找到一个.js.js扩展名的文件！

如果你想了解更多关于模块名称（也就是模块ID）和路径之间的区别的信息，我有一个answer专门解决这个问题。

Typescript模块导入的相对路径指向错误的目录

的WebAPI

main.html中

Main.js

1 个答案: