RequireJs 将 .ts 和 .js 文件提供给浏览器

Question

以下是我的 ASP.NET 核心项目中的文件。

greet.ts

export class WelcomMesssage {
name: string;
constructor(name: string) {
    this.name = name;
}
say(): void {
    console.log("Welcome " + this.name);
}
}

GreetExample.ts

import * as greet from "./greet";
export function Test(): void {
    let g = new greet.WelcomMesssage("Bhavesh");
    g.say();
}

main.ts

require.config({
     baseUrl:'Scripts'
});
require(['GreetExample'], (GreetExample) => { GreetExample.Test() });

index.html 文件

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script data-main="Scripts/main" src="lib/requirejs/require.js" 
    type="text/javascript"></script>
</head>
<body>

</body>
</html>

当我在 Chrome 调试工具中查看源代码时，我的 Web 应用程序同时提供 .ts 和 .js 文件。

为什么它同时提供 .ts 和 .js 文件？我正在缩小 .ts 文件生成的所有 javascript 并将它们全部放在 wwwroot/build 文件夹中。我如何将这个缩小的文件与 requirejs 一起使用？

Answer 1

RequireJS 不负责向浏览器提供任何内容。服务器的工作是提供文件。此外，RequireJS 不会获取任何您未明确要求它获取的内容。如果您要求它获取从 TypeScript 编译生成的 .js 文件，它不会寻找 .ts.

您的浏览器可能会获取比您要求 RequireJS 加载的文件更多的文件，或者它可能 显示您的服务器甚至没有提供的文件。例如，如果您在 Chrome 中打开调试器以查看源文件，并且您的 JS 文件是使用打开了 inlineSourceMap 和 inlineSources 的 TypeScript 编译器编译的，则调试器将显示.ts 个文件对应于 .js 个文件。即使您只将 .js 文件部署到服务器，调试器也会显示 .ts 文件，这些文件是根据您要求编译器包含在生成的代码中的内联源重建的。

另一种情况是，如果您有对外部源地图的引用。当您查看 .js 文件时，浏览器将获取该地图。如果您跟踪网络请求，您将为地图设置一个 GET 请求。

RequireJs 将 .ts 和 .js 文件提供给浏览器

RequireJs serving both .ts and .js file to browser

requirejs

typescript