Visual Studio：如何使用IIS Express和跨项目引用调试共享项目中的TypeScript（没有链接或复制文件）

Question

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

希望微软将在不久的将来升级Visual Studio，以便它支持无缝的跨项目TypeScript调试，而无需复制共享文件。在那之前，我们需要一个变通办法。其他几个人也在堆栈溢出上问了类似的问题：

• VS2013打字稿：引用和调试与多个项目
• 打字调试ts文件在其他项目
• 两个项目之间的跨项目引用

但这些问题都不符合本问题中指出的所有要求。以下是这些问题中的答案不符合我们需要的原因：

• 调试和转到定义都不能很好地工作，或者根本不能在链接文件上工作。调试ASP时，链接文件不存在。NET网站

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

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

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

任何人都有这个问题的解决方案，或者知道Microsoft是否正在Visual Studio 2015中构建跨项目引用（包括完全调试支持）？

Answer 1

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

>

在一个解决方案中有多个项目以与C#项目相同的方式组织，因此解决方案文件夹带有. sln，每个项目的子文件夹带有. csproj和打字文件。

在VS和IE11中调试的可能性（使用breakpoins和所有那些很酷的东西运行F5）

理想情况下无需附加脚本。

我试过：

• 用于将源复制到www root src的postbuild powershell脚本

两种解决方案都使用适当的tsconfig（映射设置为必要的），它正在工作，但我不满意。

在第一种情况下，问题在于文件的更新。它是工作后重建，所以它不是舒适的，因为它需要重新启动IE，建立一切，复制一切，它需要这么多的时间。但它起作用了，或多或少。

第二种解决方案更好，但我被指责项目结构混乱和奇怪（我从零开始就知道了，我也不喜欢它）。

所以我更深入地研究了这个问题，并提出了虚拟目录的解决方案。现在，项目结构与标准的C#项目结构相匹配，可以在IE11中调试，也可以在Chrome外部调试（在IIS Express和相同的localhost： port上），也可以使用“编译在正确保存”，包括css修改和页面重载，而不是重建和IE重启。

可以在IIS express（.vs/config/application.host）和IIS上手动（无需其他脚本）或通过生成后脚本自动实现这一点（我到目前为止还不需要完整的IIS，但我确信可以通过命令行将其自动化）。如果您不经常操作项目，我会说手动更新IIS/applicationhost。配置文件就足够了，并且工作得很好（当然，当tsconfig设置正确以生成映射文件并为TS文件设置sourceRoot时）。

   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与用户相关，通常不会转移到回购，因此每个用户都必须自行设置。这就是为什么我提出下面的解决方案的原因

我决定创建额外的-构建-项目，这是我在开始时想要避免的，但它将允许我做：

• 项目打开或生成后，根据解决方案中的项目自动设置虚拟目录
• 基于解决方案配置（调试/发布）和项目内容构建wwwroot。这包括：
  • 无流程/SASS
  • 缩小JS/CSS/HTML
  • 生成缓存。离线应用程序支持清单

  我快完成了，我会把链接放在这里，当我完成的时候，只是为了让你知道我是如何进行的。

  其工作原理（将在自述文件中提供，但现在仅作简要说明）：

  目前，我在解决方案中有6个项目，其中5个是带有适当tsonfig和/或HTML/LESS/SASS/CSS/JSON/IMG资源的“true”类型脚本代码。

  所有项目都基于“带TypeScript的HTML应用程序”模板。我在创建之后删除了它们的所有内容（包括web.config），所以现在它只包含我的文件。我还设置了对项目的引用，以便能够遵循所需的构建顺序。所有typescript项目都将TS传输到所属项目的bin文件夹（my Tconfig direct compiler只创建一个js文件，但也可以用于多个js文件）（如果需要，包括映射文件和d.TS）。然后，其他项目使用tsconfig中的相对路径（../libproject/bin/lib./d.ts）引用其他项目的bin文件夹中的d.ts。

  我试图像C#所做的那样复制到依赖项目。它可以工作，但需要更多的工作和时间才能正常工作（包括clean.Postbuild事件并不理想）。

  第六个项目是“构建”和启动项目，所以它不包含任何“真实”代码（除了我需要的构建工具）。它基于gulp和我为阅读解决方案/项目信息和配置而编写的一些脚本。

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

  我希望明天能完成第一个版本，并将其发布到GitHub，这样你就可以看一看，最终至少使用部分代码。你需要node.js安装。

Answer 2

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

>

添加对共享TypeScript文件的引用（使用特殊的_references.ts文件，或直接在TypeScript文件中添加引用）。

使用PowerShell自动更新TypeScript生成的映射文件，使其指向共享Web应用程序的项目URL或虚拟目录（可用于IIS Express和完整IIS）。

我意识到这看起来需要做很多工作，但设置起来不应该超过30分钟。它非常有效，从长远来看将节省开发工作和时间：

• Visual Studio使这变得简单：将TypeScript文件（单个文件或_references.ts文件）从共享项目拖到引用项目的_references.ts文件或任何其他文件TypeScript文件（_references.ts可以保持引用整洁，但它可能不会对所有项目结构都有好处）。请注意，_references.ts文件必须始终位于项目的根中，以便按预期工作。

• Visual Studio 2013 Typescript编译器不尊重“”引用。ts文件

此步骤确保共享引用使用与Visual Studio、Chrome和Firefox调试配合使用的方法指向原始共享文件（将相对共享引用替换为项目URL或虚拟目录）。

对于Microsoft：在未来的Visual Studio版本中，这种类型的引用应该是可配置和/或自动的，例如，如果文件引用自其他项目，则会自动将引用映射到共享项目的项目URL。

这适用于多个调试系统（使用Visual Studio、Chrome和Firefox进行测试）：

>

从Properties|Web|Project URL获取共享应用程序Project URL。

使用生成后事件运行PowerShell脚本，该脚本将替换应用程序中的所有共享引用。js。映射文件以指向项目URL。

生成后命令示例：

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

有关更多详细信息，请参阅下面来源下的PowerShell替换。

这不适用于Visual Studio调试，但对于某些场景可能是一个更好的选项，并且它是唯一已知的用于非web应用程序项目的选项（使用Chrome进行测试，可能适用于Firefox）：

>

将虚拟目录添加到指向共享TypeScript项目的IIS Express网站配置：https://stackoverflow.com/a/8929315/2033465（请参见编辑）。

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

生成后命令示例：

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

有关更多详细信息，请参阅下面来源下的PowerShell替换。

• PowerShell Replace： VS2010生成后事件，替换文件中的字符串。强力外壳？

如果您需要能够在生产环境中调试TypeScript文件（不是我们的要求之一），那么您可以更改生成后脚本以运行不同的命令（类似，但指向共享网站的虚拟目录，而不是本地主机）。这超出了本文的范围。

到目前为止，这是我能想出的（感谢所有其他来源）满足所有需求的最佳方法。

如果你有更好的方法，请告诉我们。