Angular中替代lite-server且支持代码覆盖率UI的优质工具推荐

1. Angular CLI 内置开发服务器 #

• 作为Angular官方标配的开发服务器，无需额外安装，集成在@angular-devkit/build-angular依赖中，完美适配Angular项目的构建、热重载需求
• 代码覆盖率UI支持：
  • 直接执行命令生成带UI的覆盖率报告：ng test --code-coverage
  • 命令完成后，项目根目录会生成coverage文件夹，打开其中的index.html就能看到可视化的覆盖率面板，包含文件、分支、语句等多维度的覆盖率数据
  • 结合ng serve的热重载特性，配合测试的watch模式（ng test --code-coverage --watch），代码修改后覆盖率会自动更新，无需手动重新生成报告

2. Webpack Dev Server #

• 适合需要自定义构建流程的Angular项目，灵活性更高，可通过npm install webpack-dev-server --save-dev安装
• 代码覆盖率UI支持：
  • 在webpack.config.js中集成istanbul-instrumenter-loader或@istanbuljs/nyc-config-typescript工具，配置覆盖率数据收集规则
  • 启动开发服务器：webpack serve，配合Karma/Jasmine等测试框架执行测试后，会生成包含UI界面的coverage目录
  • 支持热重载，代码变更时自动重新构建并更新覆盖率数据，刷新UI即可查看最新结果

3. Vite（搭配Angular插件） #

• 新一代极速构建工具，启动速度远超传统服务器，通过@angular/vite-plugin实现对Angular项目的完美支持
• 代码覆盖率UI支持：
  • 安装@vitest/coverage-v8插件后，执行vite test --coverage
  • 命令执行完成后，自动生成带交互式UI的覆盖率报告，存放在coverage文件夹中，打开index.html即可查看详细的覆盖率统计
  • 开发服务器vite启动后，配合测试的watch模式，代码修改后实时更新覆盖率数据，UI面板同步刷新

内容的提问来源于stack exchange，提问作者Prajna D