Question

我遵循了steps outlined in this so post，并已经从“空白Node.js Web应用程序”在Visual Studio中成功创建了一个React应用程序。

除了从VS进行调试以外，一切都可以！

我还遵循了this Microsoft article here，它准确地描述了我想做的事情！！！ -引导您完成“如何使用节点Web应用程序模板在Visual Studio中设置React应用程序”。在那篇文章中，他们展示了调试的工作原理，但对我而言却无效。

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

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

目前，一切正常，我什至可以从VS内部与NPM软件包进行交互。

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

一切正常，除了是从Visual Studio内进行调试！

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

我通过找到有关如何扩展构建过程的this Microsoft article进行了添加。我在项目文件中添加了以下代码，该文件可以为我调用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“执行”命令会阻塞并且不会退出。我尝试在命令前加上“开始”前缀，但这没有效果。

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解决方案，将build命令与“ npm start”和“ npm构建”

Fortunelty我发现了这个堆栈溢出的帖子，它为Execute Command提供了答案。

MSBuild exec task without blocking

这允许我将Visual Studio中的“调试版本”和“发布版本”关联到项目文件中的自定义生成目标。

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

项目：

生成可视化解决方案项目文件
在Visual Studio中将“ build / debug”命令设置为“ npm start”
在Visual Studio中设置“构建/发布”命令以“运行构建”

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

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

1 个答案: