visual-studio - Visual Studio : How to debug TypeScript in a shared project using IIS Express and cross-project references (no linking or duplicating files)

Question

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

希望微软在不久的将来版本中升级 Visual Studio，使其支持无缝的跨项目 TypeScript 调试，而无需复制共享文件。在那之前，我们需要一个解决方法。其他一些人在 Stack Overflow 上提出了类似的问题:

• VS2013 Typescript: Referencing and debugging with multiple projects
• Typescript debug ts files that are in other project
• Cross-project references between two projects

但是这些问题都不符合这个问题中指出的所有要求。这就是为什么张贴在这些问题中的答案不符合我们需求的原因:

在 Visual Studio 中递归或手动链接文件的问题

• 调试和转到定义在链接文件上都不能很好地工作，或者根本不能工作。调试 ASP.NET 网站时链接文件不存在。
• 一些有用的插件将每个链接文件视为一个单独的文件，这会减慢整个解决方案的代码审查和调试速度(例如，单个链接共享文件中的错误将显示为三个单独的错误:一个针对原始文件，一个用于引用项目 A，一个用于引用项目 B)。
• 这很不雅观。

将文件从共享项目复制到引用项目时出现问题

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

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

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

其他要求

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

有人有解决此问题的方法，或者知道 Microsoft 是否正在将跨项目引用(包括完整的调试支持)构建到 Visual Studio 2015 中？

Answer 1

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

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

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

我知道这看起来工作量很大，但设置时间不应超过 30 分钟。它工作得很好，从长远来看将节省开发工作和时间:

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

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

来源

• Visual Studio 2013 Typescript compiler isn't respecting '_references.ts' file
• http://blogs.msdn.com/b/typescript/archive/2013/12/05/announcing-typescript-0-9-5.aspx .

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

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

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

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

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

1. 从属性中获取共享应用程序项目 URL |网页 |项目网址。

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

构建后命令示例:

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

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

1. 确保设置共享 Web 应用程序项目以进行调试以及引用 Web 应用程序项目。

选项 2:您的共享代码不在 Web 应用程序项目中。

这不适用于 Visual Studio 调试，但对于某些情况可能是更好的选择，并且它是非 Web 应用程序项目的唯一已知选项(使用 Chrome 测试，可能适用于 Firefox):

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

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

构建后命令示例:

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

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

来源

• PowerShell 替换:VS2010 Post-build event, replace string in a file. Powershell?

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

结论

这是迄今为止我能想到的满足所有要求的最佳方法(感谢所有其他来源)。

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