如何让 Visual Studio 监视我的 Typescript 文件的更改？

Question

我正在开发一个遗留的、相当过时的 MVC 项目，我的任务是添加几个主要的新功能。尽管大部分 UI 都在 Razor 中，但其中一项功能将涉及相当多的 Javascript。为了让我的生活更轻松，我决定改为编写 Typescript。

使 Visual Studio 2022 将 Typescript 转译为 Javascript 非常简单，并且在构建项目时可以正常工作。问题是我还想在运行热重载时重建 Typescript 代码。

如果我对 Typescript 文件进行更改并单击“热重载”，我会收到一条消息，指出没有代码更改。由于这显然是错误的，它让我相信 Visual Studio 不会监视我的 Typescript 文件的更改。

在无法找到任何有关如何让 VS 执行我想要的操作的信息后，我遇到了一个建议，改为运行

tsc --watch

并让 Typescript 编译器进行监视。这有点难看，而且确实不是正确的方法，但如果我能让它发挥作用，我会接受它并继续前进。唉，在构建时我还没有找到运行后台进程的方法。

我的

.csproj

文件中现在包含以下内容：

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- other stuff here -->
 <!--
Taken from https://www.meziantou.net/running-npm-tasks-when-building-a-dotnet-project.htm
-->
 <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
   <Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
   <Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
   <!-- Write the stamp file, so incremental builds work -->
   <Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
 </Target>
 <!--
     2. Run npm run build before building the .NET project.
     MSBuild runs NpmInstall before this task because of the DependsOnTargets attribute.
  -->
 <Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
   <Exec Command="npm run build" />
 </Target>
 <Target Name="NpmRunWatch" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
   <Exec Command="start npm run watch" />
 </Target>

NpmRunWatch

应该运行 Typescript 监视进程。然而，尽管尝试了上面代码的许多不同变体，我仍然无法让它在后台运行。相反，构建系统会等待监视进程退出后再继续，这达不到目的。

因此，我正在寻找以下解决方案之一：

1. 配置 Visual Studio 以在单击“热重载”按钮时监视我的 Typescript 源文件的更改并进行重建。当项目中包含的任何文件发生更改时，我也接受重建，甚至仅基于热重载按钮激活的无条件重建。

2. 一种使我的

   npm run watch

   拼凑工作的方法，以便监视进程在后台运行，而不会干扰构建的其余部分。

3. 框架挑战。我这一切都错了吗？

Answer 1

关于您的解决方案1：

从.NET和本机C++应用程序来看，我认为Visual Studio的本机热重载主要支持.NET和C++项目，而不是打字稿文件。这就是为什么您会收到一条消息，指出没有代码更改。

根据我的测试，我发现如果启用

Hot Reload on File Save

并在修改更改后保存typescript文件，VS可以检测到typescript文件更改。

此外，您还可以使用

nodemon

和

ts-node

等外部工具来实现。

nodemon

ts-node

附上一张类似的票