如何使用“Blank Node.js”模板在 Visual Studio 2019 中调试 React 应用程序

Question

我遵循了这篇文章中概述的步骤，并成功地从“Blank Node.js Web Application”在 Visual Studio 中创建了一个 React 应用程序。

除了从 VS 调试外，一切正常！

我也在这里关注了这篇微软文章，它准确地描述了我想要做什么！！！- 它会引导您完成“如何使用节点 Web 应用程序模板在 Visual Studio 中设置 React 应用程序”。在那篇文章中，他们显示调试工作正常，但对我不起作用。

我正在使用标准的 npm 命令在 Visual Studio 解决方案目录中创建一个应用程序。我为自己创建了一个批处理文件，它为我完成了繁重的工作。

npx create-react-app ssm-app --typescript

此时，一切正常，我什至可以从 VS 内部与 NPM 包进行交互。

我什至在 Visual Studio 中安装了NPM Task Runner，它允许您从 package.json 运行命令（例如开始）。

除了从 Visual Studio 内部调试外，一切正常！

然后我尝试在 VS 中连接“开始调试”按钮以将npm start命令附加到它。

我通过找到这篇关于如何扩展构建过程的Microsoft 文章来添加。我将以下代码添加到项目文件中，该文件可以为我调用 npm start。

  </ProjectExtensions>
    <Target Name="AfterBuild">
         <Exec Condition="'$(EnableTypeScript)' == 'true'" Command="npm start" />
    </Target>
</Project>

它有点工作，确实启动了网络浏览器并启动了应用程序，但 Visual Studio 工具栏只是挂起。我想这是因为npm start还没有退出。我尝试将命令更改为，call npm start但它仍然挂在工具栏上。

通常，当您启动调试器时，工具栏会发生变化，您可以看到如下所示的停止按钮。那永远不会发生

任何帮助将不胜感激。我做错了什么还是我从错误的角度接近这个？

谢谢

Answer 1

只是关闭这个问题的循环。

最后，我发现当你扩展一个 .csproj 文件以调用“npm start”时，Visual Studio 挂起的原因。

原因是因为 MSBuild“执行”命令阻塞并且不退出。我尝试在命令前加上“start”，但这没有效果。

https://docs.microsoft.com/en-us/visualstudio/msbuild/exec-task?view=vs-2019

因此，如果您在构建后运行记事本，vs 输出窗口将挂起，直到您关闭记事本！

<!-- This wil block! -->
<Target Name="AfterBuild">
     <Exec Command="start notepad.exe" /> 
</Target>

我放弃了在 Visual Studio 中调试的梦想，但我仍然想使用官方 npm 包创建一个 React 应用程序，并设置一个 Visual Studio 解决方案，将构建命令与“npm start”和“npm build”联系起来

Fortunelty 我找到了这篇堆栈溢出帖子，它为执行命令提供了答案。

MSBuild exec 任务没有阻塞

这允许我将 Visual Studio 中的“调试构建”和“发布构建”与项目文件中的自定义构建目标相关联。

最后，因为我希望能够为我创建的每个新 React 项目生成一个 Visual Studio 解决方案，所以我找到了一个快速工具，它将我想要的所有东西都打包在一起：

该项目：

1. 生成可视化解决方案项目文件

2. 将 Visual Studio 中的“build/debug”命令设置为“npm start”

3. 在 Visual Studio 中设置“构建/发布”命令以“运行构建”

该项目可以在这里找到：https : //github.com/OceanAirdrop/CreateReactAppVisualStudio