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



我正在向VS2015 MVC 5项目添加一个打字稿项目(这使它 ASP.NET 4,而不是 asp.net 5或 asp.net 6代码:只有MVC是版本5)。这是我问题各个方面的唯一目标,我不能对打字稿、node.js、模块加载器等使用通用或理论指导。

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

最糟糕的是,Typescript 文档就像开源文档:你只能得到一个问题,深入一步。这产生了一个由无休止的问题树递归组成的研究工作流程。

我理解意见,我什至有一个。但我正在寻找经验上的答案,证明对制作团队有效的一种组合是什么。

因此,以下是需要解决的特定项目,这些项目需要在工作的中型 ASP.NET 4 MVC 5 LOB 应用的范围内工作:

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

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

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

  4. 哪个版本的 ECMAScript: es6 显然太超前了。 es2015 是可能的,但这(也许)似乎与其他几个问题有关系。据说,这些名称是相同的,但是可以设置两个地方。我在工具/选项/打字稿中选择了es2015。但是弄错这些(现在是 3 个)设置中的任何一个都可能是一个问题。

  5. 模块系统:CommonJs 用于节点和自动化测试,VS 开发测试仅针对服务器端自动化,VS UI 测试是手动过程。所以AMD,需要JS可能是VS的一个选项,但它增加了自己的工作流程和维护以及考虑因素,这些在 ASP.NET 中很难做到正确。使用 ASP.NET 捆绑和三斜杠引用(可靠)可能会起作用,但是在将库放在节点模块中之后,您可能希望在导入语句的文件名 slug 中使用节点模块的完整路径。这一切都非常笨拙,涉及最多的猜测。但是解决整个项目可能是整个问题的"关键"。

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

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

非常感谢您的考虑。

你缺少的是关注点的分离,尽管这种入门模板最初有好处,但它们开始引起偶然的依赖关系并使心智模型复杂化。将前端放在单独的项目中要容易得多。

无论:

Visual Studio 的打字稿版本。

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

浏览器样式测试(通常是手动 TDD 工作流)或节点.js 测试(自动化)。这必须预先选择以防止更多 问题树递归。

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

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

您应该使用对您的应用程序最有意义的方法,这可能是两者的混合。

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

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

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

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

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

简单地说,这回到了将前端与后端分离。Visual Studio,当然 ASP.NET 与类型包的版本控制无关。

  1. 如果包带有自己的类型声明,则无需安装辅助类型包,否则需要安装。

  2. 无论哪种方式,使用面向JavaScript的包管理器(如NPM,JSPM或Yarn)安装JavaScript和TypeScript依赖项。

  3. 不要将 NuGet 用于这些!

  4. 正如您建议存在版本控制问题一样,这目前在 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完全无关,我很抱歉重申这一点,但将这些想法分开真的很重要。

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

  1. 三重///引用不是一种模块格式,而是一种声明跨多个文件声明和引用的全局变量之间依赖关系的方法。

    它们不能很好地扩展,当您只有少数文件时,它们可以正常工作。

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

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

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

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

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

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

    System.register可以被认为是一种新的模块格式,旨在支持ES5中ES6模块的精确语义。它是一种协作开发的格式,支持作为 Traceur(作为实例化)、Babel 和 TypeScript(作为系统)中的模块输出。此格式支持 ES6 模块支持的所有动态绑定和循环引用行为。通过这种方式,它充当 ES6 模块中填充路径的安全且全面的目标格式。

免責聲明:我是 JSPM GitHub 组织的成员,在维护注册表方面发挥着作用,并且对 jspm CLI 做出了非常小的贡献。

最新更新