typescript - Typescript 的热重载在 Visual Studio 2022 年在 Razor 类库中编译

我确定我忽略了一些明显的东西,但是我有一个 Razor 类库,我在其中编译我的 MVC 视图,并且还在 Typescript 中编写我的客户端内容,编译成单个 Javascript 文件。我有一个使用 RCL 的 Web 项目。当我在 RCL 中更改 .cshtml 视图时,Web 项目尽职尽责地确认更改并刷新浏览器。但是,当我更改一个 .ts 文件时,它会触发 Typescript 编译器并输出一个 .js 文件,它不会刷新依赖 Web 项目中的浏览器。

现在,我可能过于复杂了。我的 RCL 项目如下所示:

/Client
--/src
----tsconfig.json
----tsfiles.ts
--/dist/outputfile.js
/wwwroot
--/dist/outputfile.js

我有一个从 /Client/dist 复制到 /wwwroot/dist 的 gulpfile。我的 tsconfig.json 看起来像这样:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "outFile": "../dist/Client.js",
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

我被困住了,因为我不了解潜在的魔法。更改 RCL 中的任何 .cshtml 文件将在浏览器中触发热重载,以查看引用 RCL 的 Web 项目。当我更新 .ts 文件时,什么都没有发生,显然 gulp 文件也不会触发。我必须重建 web 项目以获取最新的垃圾。

我想要的结果是,在 RCL 中保存 .ts 文件会在浏览器中触发与更改 .cshtml 文件相同的热重载。我的 RCL 在 .csproj 中有以下内容。

<TypescriptOutDir>wwwroot</TypescriptOutDir>
<StaticWebAssetBasePath Condition="$(StaticWebAssetBasePath) == ''">/</StaticWebAssetBasePath>
<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
    CompileTypeScript;
    $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

需要明确的是,当我手动重建 Web 项目时,RCL 的 wwwroot 中的文件在引用 RCL 项目的 Web 应用程序中按预期可见。它们在正确的地方使用,只是没有发生热重载。它使单独的项目参考非常难以使用。

编辑:有趣的是,我在 .cshtml 文件中添加了一个废弃的代码行,如果我保存,它会触发更新。如果我有一个 gulp 文件更改文件并保存,它不会触发更新。因此,管道似乎在 VS 2022 本身中。更改 CSS 文件也不会触发它,但在这两种情况下,如果它位于正在运行的项目而不是依赖的 RCL 中,它就会触发。

回答1

如果您的 JS 文件位于 wwwroot 文件夹中,Visual studio 默认会触发 hotreload(无需特殊操作)。

因此,您可以执行以下操作之一:

将 tsconfig.json outFile 从 "outFile": "../dist/Client.js" 更改为 "outFile": "../../wwwroot/dist/Client.js"。不需要 gulp 任务。

或者您可以在 gulp 中有一个 watch 任务来监视 Client/dist/Client.js 并将其复制到 wwwroot/dist/Client.js 请参阅这篇关于如何进行 gulp 监视文件更改的文章:https://gulpjs.com/docs/en/getting-started/watching-files/

相似文章

最新文章