Visual Studio：如何使用IIS Express和跨项目引用（不链接或复制文件）在共享项目中调试TypeScript [英] Visual Studio: How to debug TypeScript in a shared project using IIS Express and cross-project references (no linking or duplicating files)

问题描述

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

Ideally, we could simply add shared TypeScript project reference to another project and be able to use the referenced code just like we can with Visual Basic or C# cross-project references. Alas, that's not available yet.

希望Microsoft将在将来的版本中升级Visual Studio，以支持无缝的跨项目TypeScript调试，而无需重复共享文件。在此之前，我们需要解决方法。其他几个人在Stack Overflow上提出了类似的问题：

Hopefully, Microsoft will upgrade Visual Studio in a near-future version so that it supports seamless cross-project TypeScript debugging without having to duplicate shared files. Until then, we need a workaround. Several others have asked a similar question on Stack Overflow:

• VS2013说明书：多个项目的引用和调试


• Typescript debug ts其他项目中的文件


• 两个项目之间的跨项目引用

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

但是，这些问题中没有一个符合这个问题中的所有要求。这就是为什么在这些问题中发布的答案不符合我们的需求：

But none of those questions meet all of the requirements indicated in this question. Here is why the the answers posted in those questions don't meet our needs:

• 调试和转到定义两者都不能正常工作，或者在所有链接的文件上。调试ASP.NET网站时，链接的文件不存在。


• 一些有用的插件将每个链接的文件视为单独的文件，这会减慢整个解决方案中的代码审查和调试（for例如，单个链接的共享文件中的错误将显示为三个单独的错误：一个用于原始文件，一个用于引用项目A，另一个用于引用项目B）。


• 它不起眼

• 无论你多么小心，你很可能直接编辑一个重复的文件，而不是原始的共享文件;当您重建时，重复的文件中的所有更改都将丢失。


• 链接文件的问题也适用于此。

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

• 我们需要保留在每个引用应用程序中直接构建共享的TypeScript的能力，而不是使用单独的共享网站，然后包含该共享代码，因为引用应用程序的目标不同ECMAScript版本（例如公共网站的ECMAScript3和可以指定最小浏览器版本的管理网站的ECMAScript 5/6）和不同的应用程序引用不同的共享文件（引用项目通过不同的引用引用共享项目中的不同文件组）


• 在开发环境中通过共享网站进行调试是可行的，但对于生产构建，共享代码需要直接构建到引用项目中。


• 所有TypeScript文件，包括共享文件都是comp在每个引用项目中，都将其称为App.js。


• 确保在Visual Studio之外进行调试（所以我们可以使用Chrome，Firefox和其他支持地图的浏览器进行调试文件，以及Visual Studio / Internet Explorer中的调试）。

• We need to retain the ability to build shared TypeScript directly into each referencing application, rather than using a separate shared website and then including that shared code, because the referencing apps target different ECMAScript versions (e.g. ECMAScript3 for a public website and ECMAScript 5/6 for an admin website for which you can specify the minimum browser version) and different apps reference different shared files (referencing projects reference different groups of files in the shared project via different reference.ts files, thus keeping references neat).
• Debugging via a shared website is OK in the development environment, but for production builds, the shared code needs to be built directly into the referencing projects.
• All TypeScript files, including shared files, are compiled into a single file called App.js in each referencing project.
• Ensure that debugging is possible outside of Visual Studio (so we can debug with Chrome, Firefox, and other browsers that support map files, as well as debug within Visual Studio/Internet Explorer).

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

Anyone have a solution to this problem, or know if Microsoft is building cross-project referencing (including full debugging support) into Visual Studio 2015?

推荐答案

我们可以提出最好的解决方案满足所有要求涉及以下步骤：

The best solution we could come up with to meet all requirements involves the following steps:

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

1. Add references to your shared TypeScript files (using the special _references.ts file, or references directly in TypeScript files).

使用PowerShell自动更新TypeScript生成的地图文件，以便指向共享Web应用程序的项目URL或虚拟目录（可用于IIS Express和full IIS）。

Automatically update the TypeScript-generated map file using PowerShell so it points to either a shared Web Application's Project URL or a Virtual Directory (available for both IIS Express and full IIS).

我意识到这看起来像很多工作，但不应超过30分钟建立。它的效果很好，从长远来看可以节省开发工作和时间：

I realize this looks like a lot of work, but it shouldn't take more than 30 minutes to set up. It works great and will save development effort and time in the long run:

• Visual Studio使此简单：拖动一个TypeScript文件（单个文件或_references.ts文件）从共享项目到引用项目的_references.ts文件或任何其他TypeScript文件（_references.ts可以保持引用很好，整洁，但可能无益于所有项目结构）。请注意，_references.ts文件必须始终位于项目的根目录，才能正常工作。

• Visual Studio 2013 Typescript编译器不遵守'_references.ts'文件


• http://blogs.msdn.com/b/typescript/archive/2013/ 12/05 / announcing-typescript-0-9-5.aspx 。

• 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.

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

This step ensures that shared references point to the original shared files using a method that works with Visual Studio, Chrome, and Firefox debugging (replace relative shared references with Project URL or Virtual Directory).

对于Microsoft：此类型的引用应该是可配置的和/或自动化的将来的Visual Studio版本，例如如果文件是从另一个项目引用的，则自动将引用映射到共享项目的项目URL。

To Microsoft: This type of referencing should be configurable and/or automated in a future Visual Studio release, e.g. if a file is referenced from a different project, automatically map the reference to the shared project's Project URL.

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

This works for multiple debugging systems (tested with Visual Studio, Chrome, and Firefox):

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

1. Get the shared application Project URL from Properties | Web | Project URL.

使用Post-build Event运行PowerShell脚本，将替换App.js.map文件中的所有共享引用，指向项目网址

Use a Post-build Event to run a PowerShell script that will replace all shared references in your App.js.map files to point to the Project URL.

示例Post-build命令：

Example Post-build Command:

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

有关详细信息，请参阅PowerShell替换以下资源。

See PowerShell Replace under Sources below for more details.

1. 确保您设置共享的Web App项目以及您的引用的Web App项目。

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

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

Option 2: Your shared code is not in a Web Application project.

This does not work for Visual Studio debugging, but might be a better option for some scenarios, and it's the only known option for non-web application projects (tested with Chrome, probably works for Firefox):

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

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

Use a Post-build Event to run a Powershell script that will replace all shared references in your App.js.map files to point to the Virtual Directories you set up above.

示例Post-build命令：

Example Post-build Command:

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

请参阅PowerShell替换来源下面的更多细节。

See PowerShell Replace under Sources below for more details.

• PowerShell替换： VS2010 Post-build事件，替换文件中的字符串。 Powershell？

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

如果您需要能够在生产环境中调试TypeScript文件（不是我们的要求之一） ，那么你可以修改后续的脚本来运行不同的命令（类似的，但是指向你的共享网站的虚拟目录，而不是localhost）。

If you need to be able to debug TypeScript files in the production environment (not one of our requirements), then you could alter the post-build script to run a different command (similar, but point to your shared website's Virtual Directory instead of localhost). That's outside the scope of this post.

这是迄今为止我最好的方法（请感谢所有其他来源）满足所有要求。

That is by far the best method I could come up with (thanks to all of those other sources) that meets all of the requirements.

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

Please let us know if you have a better method.

这篇关于Visual Studio：如何使用IIS Express和跨项目引用（不链接或复制文件）在共享项目中调试TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！