VS 2015 ASP.NET 4 MVC 5 中的打字稿 - 设置和选择的工作组合是啥？

Posted 2023-03-13

【中文标题】VS 2015 ASP.NET 4 MVC 5 中的打字稿 - 设置和选择的工作组合是啥？

【英文标题】：Typescript in VS 2015 ASP.NET 4 MVC 5 - what are the working combinations of settings and choices?VS 2015 ASP.NET 4 MVC 5 中的打字稿 - 设置和选择的工作组合是什么？

【发布时间】：2017-07-07 18:56:07

【问题描述】：

我正在向 VS2015 MVC 5 项目添加一个打字稿项目（这使它成为 ASP.NET 4，不是 asp.net 5 或 asp.net 6 代码：只有 MVC 是版本 5） .这是我问题所有方面的唯一目标，我不能在 typescript、node.js、模块加载器等上使用通用或理论指导。

使用 ASP.NET Core 时问题更简单。但这不是我所面临的。当涉及到 ASP.NET 4 MVC 5 时，所有常见的示例和指南来源都避免或提供废品，因为它很难。没有人会确切地说明障碍有多难或究竟是什么。

最糟糕的是，Typescript 文档就像开源文档：你只能解决一个问题，深入一步。这会产生一个由无限问题树递归组成的研究工作流程。

我理解意见，我什至有意见。但我正在寻找经验的答案，证明对生产团队有效的组合是什么。

因此，以下是需要解决的具体项目，并使其在工作的中型 ASP.NET 4 MVC 5 LOB 应用程序的范围内工作：

Visual Studio 的打字稿版本。这是一个安装问题（最简单地使用节点）并且工具/选项 - 打字稿设置必须匹配。

浏览器式测试（通常是手动 TDD 工作流）或 node.js 测试（自动）。这必须预先选择以防止更多的问题树递归。我们将使用基于浏览器的...使用 WallabyJs 的 phantomjs。

NPM @types/library-name：应该仅基于带有 @Types 引用的 package.json 用 library-name 和 library-name.d.ts 填充 node_modules 文件夹。但实际上需要 package.json 保存 @types/library-name 和 library-name 的引用才能在我的 VS 2015 ENT v3 和 asp.net 4 mvc 5 项目中工作。然后指定的所有版本都需要手动更正'，即使这样，版本查找过程也有点可疑。这个@types 过程可能不是使用 ASP.NET 4 MVC 5 的方式，但我不知道更正替代方案可能是什么。 @Types 目前是 typescript 的唯一推荐选项。

ECMAScript 的哪个版本：es6 显然遥遥领先。 es2015 很可能，但这（也许）似乎与其他几个问题有关。据说，这些名称是相同的，但可以设置两个位置。我在工具/选项/打字稿中选择了 es2015。但是这些（现在是 3 个）设置错误可能是个问题。

模块系统：CommonJs 用于节点和自动化测试，VS 开发测试仅针对服务器端自动化，VS UI 测试是手动过程。所以 AMD，require JS 可能是 VS 的一个选项，但它添加了自己的工作流和维护以及在 ASP.NET 中很难做到的考虑因素。使用 ASP.NET 捆绑和三斜杠引用（可靠）可能有效，但在将库放入节点模块后，您可能希望在导入语句中的文件名 slug 中使用节点模块的完整路径。这一切都非常笨拙，并且涉及最多的猜测。但解决整个问题可能是整个问题的“关键”。

可能还有很多其他较小的问题。但是这样做的人将解决所有提到的项目以及其他问题。

我正在寻找的是所有这些问题的所有设置，这些设置基于 ASP.NET 4 MVC 5 实现中的工作 Typescript 应用程序，用于 VS 2015 中基于浏览器的单元/行为测试。那些已经完成它的人会明白的。

非常感谢您的考虑。

【问题讨论】：

请注意，@aluan-haddad 的回答是打字稿和决策树的优秀背景资料，可用于考虑这些问题。但是，根据他的回答，我编辑了我的问题，以更清楚地表明我只是在寻找关于 ASP.NET 4 MVC 5 的完整打字稿解决方案的战壕中的肮脏指导，包括基于浏览器的单元/行为测试打字稿代码。

虽然我很感激您澄清了您的问题，但我只想说，您将永远找不到不也 javascript 测试解决方案的 TypeScript 测试解决方案。

Aluan，请记得我说过，“但我正在寻找经验性的答案，证明对制作团队有效的组合是什么。”我相信我面临的一切都是配置问题。所有配置问题都与对特定配置用途的错误理解有关，或者无法解释配置组合的总体用途。

我跟着你。也许我误解了你的问题的目的。由于您的问题涉及一个项目阶段，即选择模块加载器和转译器之类的工具，因此我没有想到您可能有一个复杂的现有设置，并且您投入了大量资金。

【参考方案1】：

您缺少的是关注点分离，尽管此类入门模板最初有好处，但它们开始导致偶然的依赖关系并使心智模型复杂化。将前端放在单独的项目中会容易得多。

无论如何：

Visual Studio 的 typescript 版本。

始终使用最新的可用版本。这控制了支持 IDE 的 TypeScript 版本。在开发过程中，您可能最终会在单独的进程或浏览器中进行编译。同样，您将希望使用最新的，但它可能会使用不同的包管理器进行安装。

浏览器式测试（通常是手动 TDD 工作流程）或 node.js 测试（自动）。这必须预先选择以防止更多 问题树递归。

首先，我绝对同意预先选择的重要性，但是，如果仍然可以，只是不愉快地向现有项目添加测试。

TDD 工作流程涉及自动化测试，因为它们依赖于快速反馈。这与您是在浏览器中运行测试还是使用 NodeJS 无关。

您应该使用对您的应用程序最有意义的任何方法，并且可能是两者的混合。

由于您正在编写前端 JavaScript 应用程序，您可能希望在浏览器中运行一些测试。然而，正如鲍勃叔叔 (Robert C. Martin) 所说，观点应该是愚蠢的，几乎不需要测试。我对此的解释是，我们不应该花太多时间测试诸如 Angular 或 React 组件之类的东西以确保它们正确呈现，而应该专注于测试系统的行为元素，例如服务和普通旧功能。

也就是说，您可能希望针对实际的浏览器运行时运行客户端服务测试，而不仅仅是 Node.js，这是合理的。

有许多测试库可以帮助您解决这个问题。除了说你应该找到一个可靠的测试运行器和一个简单断言库之外，我没有具体的建议。 QUnit 和 Tape 等久经考验的真实测试库就是可靠选择的示例。

最后一点，重要的是不要将 集成测试 的概念与在 Web 浏览器中运行测试混淆，运行 TDD 样式测试是完全有效的，这意味着单元测试，在网络浏览器。

NPM @types/library-name: 应该填充 node_modules 文件夹 库名和库名.d.ts，但需要 package.json 为 @types/library-name 和 library-name 在我的 VS 2015 ENT v3 和 asp.net 4 mvc 5 项目中工作。

简单地说，这就是将前端与后端分离。 Visual Studio 和当然 ASP.NET 与您的类型包的版本控制无关。

如果一个包带有它自己的类型声明，那么你不需要安装辅助类型包，否则你需要。

无论哪种方式，都可以使用面向 JavaScript 的包管理器（例如 NPM、JSPM 或 Yarn）安装 JavaScript 和 TypeScript 依赖项。

不要对这些使用 NuGet！

正如您所说的存在版本控制问题，目前这是 TypeScript 中的一个难题。然而，它再次与 ASP.NET 或 Visual Studio 无关。

哪个版本的 ECMAScript: es6 显然遥遥领先。 es2015 很可能，但这似乎与几个（可能）有关系 其他问题。

ES6 与 ES2015 相同，后者是前者最终发布的名称。 ECMAScript 现在大致遵循每年的节奏，ES2017 指日可待。

拥有转译器（例如 TypeScript）的好处是，您可以使用 es2017 的最新功能，并且仍然以 es5 为目标进行发射，您会没事的。

模块系统：CommonJS 用于 NodeJS 和自动化测试，VS 开发测试仅对服务器端和 VS UI 测试是自动化的 是一个手动过程。所以 AMD/UMD 需要 JS 可能是 VS，但它增加了自己的工作流程和维护和注意事项。 使用三斜杠引用（可靠）可能有效，但在你之后 已将您/他们的库放在您想要使用的节点模块中 导入中文件名 slug 中节点模块的完整路径 陈述。 （解决这整个项目可能是整体的“关键” 问题）。

这是一个非常复杂的主题，可能是您真正需要花费大量时间考虑的唯一一个问题。正如我之前所说，是否使用 NodeJS 与自动化测试是正交的。但是，如果您使用测试代码以本机 NodeJS 为目标，那么您将需要使用 CommonJS 输出。

对于实际的应用程序代码，选择与您是否使用 Visual Studio 没有任何关系，我很抱歉重申这一点，但将这些想法分开确实很重要。

为您的前端应用程序代码使用哪种模块格式是一个非常重要且有争议的问题。

三重 /// 引用不是一种模块格式，而是一种声明全局变量之间依赖关系的方式，这些全局变量在多个文件中声明和引用。

它们不能很好地扩展，当您只有少数文件时可以接受。

不应使用三重 /// 引用。它们不是模块化机制，它们的使用与使用您提到的任何模块系统/模块格式（包括 CommonJS）完全不同。

永远不要将它们与模块系统结合起来，这是为了在 NodeJS 下运行测试或使用 RequireJS 或其他任何东西加载应用程序所必须做的。

RequireJS 是一个很好的选择，正如你所说，它意味着 AMD 模块。 RequireJS 不需要使用三斜杠引用。事实上，在使用这种格式或任何其他模块格式时，应该避免它们成为瘟疫！

我强烈建议不要使用 UMD 模块。同构 JavaScript 是一个有问题的想法，因为您正在使用 .NET 后端创建浏览器应用程序，所以它没有给您带来任何好处。

许多开发人员实际上确实在浏览器中使用 CommonJS 模块。这需要使用 Webpack 等工具不断地捆绑它们。这种方法有优点也有缺点。主要优点是能够通过 Webpack 或 Browserify 依赖现有的 NodeJS JavaScript 服务器端工具，例如 npm。这听起来可能不是一个很大的优势，但可用于 CommonJS 模块的丰富工具数量不容小觑，使其成为一个强大的选择。

考虑使用System 模块格式和通过jspm 的SystemJS 加载器来管理你的包和加载你的代码。使用这种方法，您可以获得 RequireJS 的优势，能够在 NodeJS 和使用 jspm run 的浏览器下运行测试，而无需切换目标格式或捆绑您的代码来测试它。在开发过程中也不需要捆绑您的代码，尽管这是受支持的。更重要的是，您获得了编写未来兼容代码的优势，因为它提供了唯一的模块格式和加载器，可以正确建模 ES 模块在浏览器中本机实现时最终将具有的语义。 JSPM 对 TypeScript、Babel 和 Traceur 具有一流的支持。 对于后代，这里是从上面的链接中获取的系统模块格式的描述：

System.register 可以被认为是一种新的模块格式，旨在支持 ES5 中 ES6 模块的确切语义。它是一种协作开发的格式，在 Traceur（作为实例化）、Babel 和 TypeScript（作为系统）中作为模块输出得到支持。这种格式支持 ES6 模块支持的所有动态绑定和循环引用行为。通过这种方式，它可以作为一种安全且全面的目标格式，用于将 polyfill 路径添加到 ES6 模块中。

免责声明： 我是 JSPM GitHub 组织的成员，负责维护注册表，对 jspm cli 做出了非常小的贡献。

【讨论】：

这确实是一个了不起的答案！但是，我一直专注于 Visual Studio 项目中与 ASP.NET 4 和 MVC 5 的 typescript 集成，但我一直无法正常工作。您的考虑很笼统。可以在 webstorm 或 ASP.NET Core 中的 node.js 或基于浏览器的应用程序中获得我需要的所有东西，但我找不到 ASP.NET 4 MVC 5 的工作指南或完整指南。正如我所说, “完成此操作的人将解决所有提到的项目以及其他项目。”这就是我要查找的信息。

有趣的是，我想说 TypeScript 是目前记录较好的项目之一。 Visual Studio 长期以来一直具有内置支持。您可以从typescriptlang.org 获得最新版本的语言服务插件，该插件的突出特点。关键在于，在涉及 TypeScript 集成的情况下，您拥有与 JavaScript 集成基本相同的选项集，大致不多也不少。关键的一点是，对于像 asp.net 这样的平台，没有特定于 typescript 的集成，因为……它只是 JavaScript。

Aluan，只有 Typescript 网站是可靠的，而且它的规模很小。我已经完成了所有的复数观察，并阅读了所有的书籍和 gitbooks。爬过帖子就像在交换会议上试图找到一个左撇子司机。它可以生存的唯一方法是如果你在 engo-sphere 的一小块区域工作。对我来说，研究是可能解决方案的主要基础。两年内我已经六次放弃了 VS 中的 typescript。 TS git 博客是零散的和无上下文的。当另一个图书馆的团队“前进”时，一个月固定的事情再次出现。确实是缺乏可理解性。

所以我终于做了一件事：我删除了 bluebird 并且 es6.Promise 目前没有抛出任何错误。现在，我在 msbuild 的 CompileTypeScriptWithTSConfig 目标中的 VsTsc 操作中遇到了构建错误，而错误是“无法从每个 js 和 js.map 上创建 URI”以从 ts 文件输出。并且缺少 js 和 map 文件。听起来很熟悉？谢谢，

Aluan，如果您在 Visual Studio ASP.NET 4 MVC 5 LOB 应用程序中有大量工作的 Typescript 项目，不使用 ASP.NET Core，不在 Node.JS 上运行，而是使用 MVC 控制器，和 Razor View 视图，带有模型、ViewModels、EF7 和 ASP.NET 4 MVC 5 堆栈的其余部分，然后我会付钱来获取您的打字稿设置的副本。我愿意花更多的钱来获得一份 ASP.NET 4 MVC 5 解决方案文件夹的副本，包括项目文件和除 Controllers 文件夹、API 文件夹 Views 文件夹、Models 文件夹和 ViewModels 文件夹之外的所有内容。只需删除这些文件夹并命名您的价格即可。