typescript - 在 ASP.NET Core 2.2 应用程序中导入 Typescript 模块

Question

我正在尝试在 ASP.NET Core 2.2 应用程序 (Visual Studio 2019) 中执行一个 Typescript 文件到另一个 Typescript 文件的简单导入。我没有使用任何其他框架，例如 Angular。我遇到了无法在运行时找到模块文件的正确路径的问题。

我有 2 个简单的 Typescript 文件，我已将它们放入子文件夹“Typescript”中 - 它们被命名为“MyTSModule.ts”和“AnotherTSModule.ts”(下面是解决方案资源管理器的屏幕截图)。第一个 Typescript 模块包含一个函数，该函数引用第二个 Typescript 模块中的一个属性。

最终，我想在 HTML Script 标记内的第一个 Typescript 模块中执行该函数。这些文件的代码如下，包括“tsconfig.json”。

tsconfig.json 文件

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "outDir": "wwwroot/js/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

MyTSModule.ts 文件

import { anotherTSMessage } from "../Typescript/AnotherTSModule";

export function SayHelloFromAnotherTSModule() {
    alert(anotherTSMessage);

另一个TSModule.ts文件

export const anotherTSMessage = "This message is from a second TS Module";

在 CSHTML 页面中

 <script type="module">

        import { SayHelloFromAnotherTSModule } from './js/MyTSModule.js';

        $(document).ready(function () {

            alert(SayHelloFromAnotherTSModule());

        });

    </script>

在“输出”窗口中，我收到“加载资源失败:服务器响应状态为 404(未找到)[ http://localhost:51711/Typescript/AnotherTSModule]””错误。我认为路径是错误的，但我该如何解决这个问题？谢谢。

解决方案资源管理器的屏幕截图...

Answer 1

我遇到了同样的问题。问题是，您正在请求 http://localhost:51711/Typescript/AnotherTSModule 而文件是 http://localhost:51711/Typescript/AnotherTSModule.js。

有很多方法可以修复它。

您可以尝试让内核服务器提供不带扩展名的文件，如此处的回答asp.net core - How to serve static file with no extension , 但我没有运气。

您可以将“.js”部分添加到导入的代码行中，并使其看起来像这样:

import { anotherTSMessage } from "../Typescript/AnotherTSModule.js";

但是如果你在实际项目中需要它，我会推荐使用webpack。

您也可以从服务器提供您的文件，这没有问题提供没有扩展名的文件，例如 nginx。