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

【问题标题】：Relative Path for Typescript module import pointing to wrong DirectoryTypescript模块导入的相对路径指向错误的目录
【发布时间】：2017-06-14 21:00:48
【问题描述】：

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

WebAPI

转译为 build/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
});

【问题讨论】：

标签： visual-studio-2017 typescript javascript html requirejs javascript typescript requirejs relative-path microsoft-dynamics-webapi

【解决方案1】：

您应该做的第一件事是从您的模块名称中删除 .js（您的 require 调用和您的 import 语句）。您传入的名称 require 和define 是模块名称。它们看起来像路径，但它们不是真正的路径。 RequireJS 获取模块名称并使用map、paths 和baseUrl 配置选项（以命名最常用的选项）将它们转换为路径。当您不使用这些选项时，它会使用合理的默认值。

如果您确实在模块名称中使用.js，RequireJS 假定您传递的是路径而不是实际的模块名称。（如果您以斜杠开始字符串，使用类似 (foo?blah) 中的查询参数，或者字符串中有冒号，RequireJS 将其视为您正在使用协议的指示（例如 @ 987654333@)。）在这种情况下，没有将模块名称转换为路径，因此 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 配置中设置一个指向包含文件WebAPI.js。或者你可以使用paths:

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

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

如果您想详细了解模块名称（也称为模块 ID）和路径之间的区别，我有一个 answer 专门介绍了这一点。

【讨论】：