angular - 在 VS Code 中使用 Angular/CLI，我可以在构建的同时运行测试吗？

Question

我一直在 VS Code 的上下文中使用 Angular/CLI。

在 VS Code 中的终端提示符下，可以调用 ng serve 或 ng test —— 但有没有办法将两者结合起来(例如:类似 ng serve test) 这样当我进行 TDD 并首先开发测试时，我看到终端显示失败的测试，然后在我编写代码以满足测试时变绿，并且看到在另一个屏幕上显示网页结果？

谢谢!

Answer 1

对于这个问题，我知道有 2 种解决方案:

使用 2 个终端的工作环境

• 只需打开 2 个终端
• 其中之一，运行 ng serve
• 在另一个中，运行ng test

我尝试使用 VS Code 终端和传统的 Windows cmd 终端。它有效，但它非常有限并且意味着很多视觉污染。

使用 npm 包的可分发解决方案

您可以使用名为 npm-run-all 的 npm 包。此软件包可帮助您并行或顺序运行多个 npm 任务。

随便跑

npm install --save-dev npm-run-all

这将在项目的开发依赖项中安装 npm-run-all。

npm-run-all 有两种模式:

• run-p:并行运行多个任务
• run-s:顺序运行多个任务

在项目的 package.json 文件中，在 script 部分，您现在可以添加:

"scripts": {
  ...
  "tdd": "run-p \"start\" \"test\"",
  "verify": "run-s \"test -- --watch=false\" \"lint\"",
  ...
},

您可以随意调用任务。我只是将开发任务命名为 tdd 以更明确地表明我的意图。

注意:您还可以使用另一个名为concurrently 的npm 包，但我不确定它是否按顺序运行 模式。

此解决方案是可分发的:每个开发人员现在都能够在您的项目上执行 npm install 并运行任务 tdd(或任何您想要的名称)。此外，您还可以创建要在构建工厂中运行的任务。这允许您的项目集成到开发运营环境中。