Visual Studio:如何使用IIS Express和跨项目引用(没有链接或复制文件)在共享项目中调试TypeScript

时间:2015-01-04 01:57:12

标签: visual-studio debugging visual-studio-2013 typescript

理想情况下,我们可以简单地将共享TypeScript项目引用添加到另一个项目,并且能够像使用Visual Basic或C#跨项目引用一样使用引用的代码。唉,那还没有。

希望Microsoft能够在近期版本中升级Visual Studio,以便它支持无缝的跨项目TypeScript调试,而无需复制共享文件。在那之前,我们需要一个解决方法。其他几个人在Stack Overflow上提出了类似的问题:

但这些问题都不符合本问题中指出的所有要求。这就是为什么这些问题中的答案不能满足我们的需求:

在Visual Studio

中递归或手动链接文件的问题
  • 调试和转到定义对链接文件都不起作用或根本不起作用。调试ASP.NET网站时,链接文件不存在。
  • 一些有用的插件将每个链接文件视为一个单独的文件,这会减慢整个解决方案中的代码审查和调试速度(例如,单个链接共享文件中的错误将显示为三个单独的错误:一个用于原始文件,一个用于引用项目A,另一个用于引用项目B)。
  • 它不够优雅。

将文件从共享项目复制到引用项目的问题

  • 无论你多么小心,你很可能会直接编辑一个重复的文件,而不是原始的共享文件;重建时,重复文件中的所有更改都将丢失。
  • 链接文件的问题也适用于此处。

简单引用共享项目TypeScript文件的问题

  • 在多个系统中调试所需的生成的映射文件不指向共享项目。相反,它指向路径相对文件引用,它会破坏共享文件调试。

其他要求

  • 我们需要保留直接在每个引用应用程序中构建共享TypeScript的能力,而不是使用单独的共享网站然后包含该共享代码,因为引用应用程序针对不同的ECMAScript版本(例如ECMAScript3用于公共网站和ECMAScript 5/6用于管理网站,您可以为其指定最低浏览器版本),不同的应用程序引用不同的共享文件(引用项目通过不同的reference.ts文件引用共享项目中的不同文件组,从而保持引用整洁)。 / LI>
  • 在开发环境中通过共享网站进行调试是正常的,但对于生产版本,共享代码需要直接构建到引用项目中。
  • 所有TypeScript文件(包括共享文件)都会在每个引用项目中编译为一个名为App.js的文件。
  • 确保可以在Visual Studio之外进行调试(因此我们可以使用Chrome,Firefox和其他支持地图文件的浏览器进行调试,以及在Visual Studio / Internet Explorer中进行调试)。

任何人都有这个问题的解决方案,或者知道Microsoft是否在Visual Studio 2015中构建跨项目引用(包括完整的调试支持)?

2 个答案:

答案 0 :(得分:4)

我们可以提出满足所有要求的最佳解决方案包括以下步骤:

  1. 添加对共享TypeScript文件的引用(使用特殊的_references.ts文件,或直接在TypeScript文件中引用)。

  2. 使用PowerShell自动更新TypeScript生成的地图文件,使其指向共享的Web应用程序的项目URL或虚拟目录(可用于IIS Express和完整的IIS)。

  3. 我意识到这看起来很多,但设置时间不应超过30分钟。它运行良好,从长远来看可以节省开发工作和时间:

    1。添加对共享TypeScript文件的引用

    • Visual Studio使这一过程变得简单:将TypeScript文件(单个文件或_references.ts文件)从共享项目拖动到引用项目的_references.ts文件或任何其他TypeScript文件(_references.ts)可以使引用保持良好和整洁,但它可能不会使所有项目结构受益)。请注意,_references.ts文件必须始终位于项目的根目录中才能按预期工作。

    来源

    2。使用PowerShell自动更新TypeScript生成的映射文件(以启用调试)

    此步骤确保共享引用使用适用于Visual Studio,Chrome和Firefox调试的方法指向原始共享文件(将相对共享引用替换为项目URL或虚拟目录)。

    致Microsoft:这种类型的引用应该在将来的Visual Studio版本中可配置和/或自动化,例如:如果从不同的项目引用文件,则自动将引用映射到共享项目的项目URL。

    选项1:您的共享代码位于Web应用程序项目中。

    这适用于多个调试系统(使用Visual Studio,Chrome和Firefox测试):

    1. 从Properties |获取共享应用程序项目URL网络|项目网址。

    2. 使用构建后事件运行PowerShell脚本,该脚本将替换App.js.map文件中的所有共享引用,以指向项目URL。

    3. 示例后构建命令:

      Powershell [io.file]::WriteAllText('$(ProjectDir)Scripts\App.js.map', ((gc '$(ProjectDir)Scripts\App.js.map') -replace '../../Shared_TypeScript/','http://localhost:12345/'))
      

      有关详细信息,请参阅以下“来源”下的“PowerShell替换”。

      1. 确保设置共享Web App项目以进行调试以及引用Web App项目。
      2. 选项2:您的共享代码不在Web应用程序项目中。

        这对Visual Studio调试不起作用,但对于某些场景可能是更好的选择,并且它是非Web应用程序项目的唯一已知选项(使用Chrome测试,可能适用于Firefox):< / p>

        1. 将虚拟目录添加到指向共享TypeScript项目的IIS Express网站配置中:https://stackoverflow.com/a/8929315/2033465(请参阅编辑)。

        2. 使用构建后事件运行Powershell脚本,该脚本将替换App.js.map文件中的所有共享引用,以指向您在上面设置的虚拟目录。

        3. 示例后构建命令:

          Powershell [io.file]::WriteAllText('$(ProjectDir)Scripts\App.js.map', ((gc '$(ProjectDir)Scripts\App.js.map') -replace '../../GlobalRef/','/GlobalRef/'))
          

          有关详细信息,请参阅以下“来源”下的“PowerShell替换”。

          来源

          如果您需要能够在生产环境中调试TypeScript文件(不是我们的要求之一),那么您可以更改后期构建脚本以运行不同的命令(类似,但指向您的共享网站&#39 ; s虚拟目录而不是localhost)。这不属于本文的范围。

          结论

          到目前为止,这是我能够提出的最好的方法(感谢所有其他来源),满足所有要求。

          如果您有更好的方法,请告诉我们。

答案 1 :(得分:0)

我正在解决类似的问题。我的要求是:

  • 在一个解决方案中以与C#项目相同的方式组织多个项目,因此每个项目的.sln和子文件夹的解决方案文件夹都包含.csproj和typescript文件。

  • 在VS和IE11中调试可能性(通过F5运行破坏点和所有那些很酷的东西)

  • 理想情况下没有其他脚本。

我试过了:

  • postbuild powershell脚本将源复制到www root src
  • 以启动项目为wwwroot的方式组织项目,其他项目放在wwwroot的src文件夹下(所以在/ src文件夹下的启动项目文件夹内)

两个解决方案都在使用适当的tsconfig(映射已设置为必要),它正在运行,但我不满意。

在第一种情况下,问题在于更新文件。它刚刚在重建后工作,因此它不太舒服,因为它需要重新启动IE,构建所有内容,复制所有内容并且需要花费很多时间。但它可以工作,少或多。

第二种解决方案更好但是我被指责项目结构凌乱而且很奇怪(我从头开始知道,我也不喜欢它。)

所以我更深入地解决了这个问题,我带来了虚拟目录的解决方案。现在,项目结构与标准C#项目结构相匹配,可以在IE11中进行调试,在外部使用Chrome进行调试(在IIS Express和相同的localhost:端口上),也可以使用&#34;编译保存&# 34;正确包括即css修改和页面重新加载,而不是重建和IE重启。

可以手动(没有其他脚本)或通过IIS快递(.vs / config / application.host)和IIS上的构建后脚本自动实现(我不需要完整的IIS直到现在,但我很确定可以通过命令行自动化它)。如果您不经常操作项目,我会说IIS / applicationhost.config文件的手动更新就足够了并且运行良好(当然正确设置tsconfig以生成映射文件并为您的TS文件设置sourceRoot)。 / p>

   Search for the 
   .vs/config/applicationhost.config -> <system.applicationHost> -> <sites> -> <site name="YOUR-STARTUP-PROJECT">
   for each project in the solution add\
   <virtualDirectory path="/src/YourSoultionProject1Name" physicalPath="C:\...PATH-TO-YOUR-PROJECT-ROOT-FOLDER-ON-DISK">

对于每个项目,也不要忘记将tsconfig文件的sourceRoot选项设置为/ src / YOUR_PROJECT_NAME(或在项目属性中配置ts编译器)

这是我迄今为止找到的最佳解决方案。只有一个问题是.vs与用户有关,并且通常不会转移到repo,所以每个用户都必须自己设置它。这就是为什么我提出解决方案的原因(在其他人之外)

我决定创建一个额外的 - 构建 - 项目,我想在开始时避免,但它允许我这样做:

  • 在项目打开或构建
  • 后,根据解决方案中的项目自动设置虚拟目录
  • 根据解决方案配置(Debug / Release)构建wwwroot并投影内容。这包括:
    • 处理LESS / SASS
    • 缩小JS / CSS / HTML
    • 为离线应用支持生成cache.manifest
  • 从IE中的Visual Studio或Chrome中的外部调试
  • 通常使用Web项目发布到Azure
  • 清理wwwroot,即js文件夹
  • 监控解决方案中任何项目中任何文件的更改,并将更改应用于目标文件而无需重建(基于gulp watch)

我差不多完成了它,当我结束时,我会把链接放在这里,只是为了让你知道我是如何继续的。

它是如何工作的(它将在自述文件中,但现在只是简单解释):

目前,我在解决方案中有6个项目,其中5个是&#34; true&#34; TypeScript代码包含适当的tsonfig和/或HTML / LESS / SASS / CSS / JSON / IMG资源。

所有项目都基于&#34; HTML应用程序和TypeScript&#34;模板。我在创建后删除了所有内容(包括web.config),因此它现在只包含我的文件。我还设置了对项目的引用,以便可以遵循所需的构建顺序。所有打字稿项目都会将TS转换为bin文件夹(我的tsconfig直接编译器只创建一个单独的js文件,但它也适用于多个)拥有项目(包括地图文件和d.ts,如果需要)。然后,其他项目使用tsconfig中的相对路径(../libproject/bin/lib./d.ts)引用其他项目的bin文件夹中的d.ts.

我试着像C#一样复制到依赖项目。它可以工作,但需要更多的工作和时间才能使其正常工作(包括干净。后期建筑事件并不理想)。

第六个项目是&#34; build&#34;和启动项目,所以它不包含任何&#34;真正的&#34;代码(我需要的构建工具除外)。它基于gulp和我为阅读解决方案/项目信息和配置而编写的一些脚本。

它还从每个控制wwwroot构建过程的项目中读取我的自定义配置。最后,它是将资源从解决方案项目复制/处理(缩小)到此构建/启动项目。

我希望我明天完成第一个版本并将其发布到GitHub,以便您可以查看它并最终使用至少部分代码。您需要安装node.js。