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

Question

我有一个使用typescript在visual-studio-2017中编写的应用程序层。 我也有使用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假定您传递路径而不是实际模块名称。 （如果使用斜杠启动字符串，使用类似in（ foo?blah ）的查询参数，或者如果字符串中有冒号，则表示您正在使用协议（例如http:// ）。）在这种情况下，模块名称没有转换为路径，因此map ， paths和baseUrl都被忽略。 这是一段代码：

        //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的值是req.jsExtRegExp /^\\/|:|\\?|\\.js$/ 。

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

此外，你需要做的事情，这样require(["WebAPI"]...将解决的正确道路。为此，您可以通过设置baseUrl在您RequireJS配置指向包含该文件的目录WebAPI.js或者你可以使用paths ：

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

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

如果你想了解更多关于模块名称（也就是模块ID）和路径之间的区别，我有一个特别的答案。

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

问题描述

的WebAPI

main.html中

Main.js

1 个解决方案

解决方案1
0 2017-06-15 13:17:33

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

问题描述

的WebAPI

main.html中

Main.js

1 个解决方案

解决方案1 0 2017-06-15 13:17:33

解决方案1
0 2017-06-15 13:17:33