在 VS2017 中调试 Aurelia webpack typescript 应用程序答案

【问题标题】：Debug Aurelia webpack typescript application in VS2017在 VS2017 中调试 Aurelia webpack typescript 应用程序
【发布时间】：2017-04-26 15:23:02
【问题描述】：

我做了以下步骤：

已下载 Aurelia WebPack 2 typescript 骨架。
通过运行yarn install 安装所有节点模块。
在 Visual Studio 2017 中打开项目文件夹。
Task Runner 找到package.json，我可以成功启动任务了

现在我不知道如何启动应用程序并告诉 Visual Studio 2017 对其进行调试。

请帮忙。

更新这是我在调试菜单中看到的：

【问题讨论】：

您完成了这篇博文中的步骤了吗？ blogs.msdn.microsoft.com/webdev/2016/11/21/…
不，将尝试并发布答案。谢谢
嗨，我刚刚尝试了上面的链接，但我在调试下拉菜单中没有这个设置。似乎只有在调试 ASP.Net 应用程序时才有可能，而我没有 ASP.Net 应用程序。我只有一个带有 Aurelia 骨架的文件夹。
您是否特别想使用 VS 进行调试，而不是浏览器的开发工具？手动运行命令为应用提供服务是不可接受的吗？
是的，我现在可以在 web-browser 和 webstorm 中调试，但我希望能够在 VS2017 中开发和调试我的应用程序。我手动运行脚本没有问题，但是如何告诉 VS2017 调试这个应用程序。如果我可以按 F5 并运行/调试应用程序，那就太好了。

标签： debugging typescript webpack aurelia visual-studio-2017

【解决方案1】：

将以下突出显示的行和 RunWebPack 目标添加到我的 .csproj 文件中：

<PropertyGroup>
  <TargetFramework>netcoreapp1.1</TargetFramework>
  <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  <IsPackable>false</IsPackable>
</PropertyGroup>

<Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in  
production mode -->
  <Exec Command="npm install" />
  <Exec Command="node node_modules/webpack/bin/webpack.js --config 
webpack.config.vendor.js --env.prod" />
  <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

  <!-- Include the newly-built files in the publish output -->
  <ItemGroup>
    <DistFiles Include="wwwroot\dist\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" 
Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

在调试期间也打开“模块”窗口，并检查它是否有关于哪些符号遇到此问题的更详细信息。

请同时在>ToolS->Options->Debugging下启用Microsoft Symbol Servers，再次调试。

【讨论】：

我没有 .csproj 文件，我正在使用 VS2017 新命令“打开文件夹”来打开我的项目文件夹。