36. 实战：项目整合与测试验证 ​

我们已经走过了漫长而激动人心的旅程。从一个空目录开始，我们一步步构建了一个功能虽简但五脏俱全的 mini-vite。它拥有开发服务器、模块图、HMR、插件系统、构建和预览功能，完整地贯穿了 Vite 的核心设计思想。

在本书的最后一章，我们将完成两项收尾工作：

1. 项目整合：将分散的 server.js, build.js, preview.js 脚本整合到一个统一的 CLI 入口中。
2. 测试验证：探讨如何为我们构建的工具链添加测试，以确保其稳定性和可靠性。

1. 实践：整合为统一的 CLI ​

目前，我们需要通过 node mini-vite/server.js 或 npm run dev 这样的命令来启动不同的功能。一个更专业的工具会提供一个统一的 CLI 入口，例如 vite dev, vite build。

我们将创建一个 cli.js 文件作为 mini-vite 的总入口。

// mini-vite/cli.js

// 获取命令行参数
const args = process.argv.slice(2);
const command = args[0];

async function run() {
  if (command === 'dev') {
    // 动态导入并运行开发服务器
    const { createServer } = await import('./server.js');
    createServer();
  } else if (command === 'build') {
    // 动态导入并运行构建脚本
    const { runBuild } = await import('./build.js');
    runBuild();
  } else if (command === 'preview') {
    // 动态导入并运行预览服务器
    const { runPreview } = await import('./preview.js');
    runPreview();
  } else {
    console.log('Unknown command. Available commands: dev, build, preview');
  }
}

run();

这个 cli.js 文件非常直观。它解析命令行的第一个参数，并根据参数值动态地 import 并执行对应的功能模块。

为了让它更容易使用，我们可以修改 package.json：

// package.json
{
  "scripts": {
    "dev": "node mini-vite/cli.js dev",
    "build": "node mini-vite/cli.js build",
    "preview": "node mini-vite/cli.js preview"
  }
}

现在，我们的命令更加规范和统一了。更进一步，我们可以通过在 package.json 中添加 bin 字段，将 mini-vite 作为一个真正的命令行工具发布到 npm，但这超出了我们本次实践的范围。

2. 理论：如何测试一个构建工具？ ​

编写代码只是工作的一半，另一半是确保它能正确、稳定地工作。对于 mini-vite 这样的底层工具链来说，测试尤为重要。

测试构建工具通常分为几个层面：

• 单元测试 (Unit Tests)

  • 目标：测试最小的功能单元，例如一个独立的函数或一个插件。
  • 示例：
    • 我们可以为 bareModuleRewritePlugin 编写单元测试，验证它能否正确地将 import 'react' 解析为指向 node_modules 的路径。
    • 我们可以测试 ModuleGraph 类的方法，确保它能正确地添加节点和更新依赖关系。
  • 工具：vitest, jest 等。

• 集成测试 (Integration Tests)

  • 目标：测试多个单元如何协同工作。
  • 示例：
    • 我们可以测试插件容器，确保它能按照正确的顺序执行多个插件的 transform 钩子，并将结果正确地传递下去。

• 端到端测试 (End-to-End, E2E Tests)

  • 目标：从用户的角度出发，模拟真实的使用场景，测试整个系统的完整流程。
  • 示例：
    1. 创建一个包含 main.js 和 index.html 的简单项目。
    2. 以编程方式启动 mini-vite 的开发服务器。
    3. 使用 Puppeteer 或 Playwright 这样的无头浏览器工具，访问服务器地址。
    4. 在页面中检查某个元素的文本内容是否符合预期，以验证页面是否正确渲染。
    5. 修改 main.js 的源文件，然后再次检查页面，验证 HMR（在这里是热重载）是否生效。
    6. 运行 build 命令，然后用 preview 服务器启动产物，再次用无头浏览器访问，验证构建结果是否正确。

对于 mini-vite 来说，端到端测试是最有价值的，因为它能覆盖从开发到构建的整个生命周期，最真实地反映出用户会遇到的情况。

结语：回顾与展望 ​

恭喜你！从零开始，我们亲手实现了一个迷你版的 Vite。在这个过程中，我们不仅学习了 Vite 的核心原理，更重要的是，我们理解了这些设计背后的“为什么”。

• 我们通过中间件和插件系统，理解了软件架构中“解耦”与“扩展”的重要性。
• 我们通过构建模块图，理解了现代开发工具如何智能地管理代码依赖。
• 我们通过实现 HMR，体会到了极致开发体验背后的技术支撑。
• 我们通过整合构建与预览，理解了从开发到生产的完整闭环。

你构建的 mini-vite 不仅仅是一个玩具项目，它是你深入理解现代前端工程化的一个缩影，一座连接理论与实践的桥梁。

希望这次旅程能为你打开一扇新的大门。当你再次使用 Vite 或其他构建工具时，你看到的将不再是一个黑盒，而是一个由无数精妙设计和权衡取舍构成的、充满智慧的系统。而这，正是成为一名优秀工程师的关键一步。