如何在Visual Studio 2019中使用；Blank Node.js"；模板

我遵循了，并成功地从“Blank Node.js Web应用程序”在Visual Studio中创建了一个React应用程序

除了从VS进行调试外，一切都正常

我也遵循了正确描述我想做什么的方法！！！-它将引导您完成“如何使用节点web应用程序模板在Visual Studio中设置react应用程序”。在那篇文章中，他们展示了调试工作，但对我来说不起作用

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

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

在这一点上，一切都很好，我甚至可以从内部与NPM包交互

我甚至在VisualStudio中安装了它，它允许您从package.json运行命令（比如Start）

除了从VisualStudio内部进行调试外，其他一切都正常

然后，我尝试连接VS中的“启动调试”按钮，将其连接到

npm Start

命令

我是通过发现如何扩展构建过程来实现这一点的。我在项目文件中添加了以下代码，works可以为我调用npm start

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

它可以正常工作并启动web浏览器并启动应用程序，但VisualStudio工具栏只是挂起。我认为这是因为

npm start

尚未退出。我已尝试将命令更改为

callnpmstart

，但它仍然挂起在工具栏上

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

任何帮助都将不胜感激。我是做错了什么，还是从错误的角度来看待这件事

---

谢谢你刚刚结束了这个问题的讨论

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

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

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

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

我放弃了在visual studio内部调试的梦想，但我仍然希望使用官方的npm软件包创建一个react应用程序，并设置一个visual studio解决方案，将build命令与“npm start”和“npm build”绑定在一起

我发现了这个堆栈溢出帖子，它为Execute命令提供了一个答案

这允许我将Visual studio中的“调试生成”和“发布生成”与项目文件中的自定义生成目标相关联

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

该项目：

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

将visual studio中的“build/debug”命令设置为“npm start”

在visual studio中设置“生成/发布”命令以“运行生成”

可在以下位置找到该项目：