33. 实战：实现模块图与基本 HMR ​

// mini-vite/moduleGraph.js

export class ModuleNode {
  constructor(url) {
    this.url = url; // 模块的 URL
    this.importers = new Set(); // 依赖当前模块的模块
    this.importedModules = new Set(); // 当前模块依赖的模块
    this.transformResult = null; // 模块的转换结果
  }
}

export class ModuleGraph {
  constructor() {
    this.urlToModuleMap = new Map();
    this.fileToModulesMap = new Map();
  }

  getModule(url) {
    return this.urlToModuleMap.get(url);
  }

  // 确保模块存在于图中
  ensureEntry(url) {
    if (!this.urlToModuleMap.has(url)) {
      this.urlToModuleMap.set(url, new ModuleNode(url));
    }
    return this.urlToModuleMap.get(url);
  }

  // 更新模块信息
  async updateModuleInfo(mod, importedModules) {
    mod.importedModules.clear();
    for (const imported of importedModules) {
      const depMod = this.ensureEntry(imported);
      depMod.importers.add(mod);
      mod.importedModules.add(depMod);
    }
  }
}

// mini-vite/server.js
import { ModuleGraph } from './moduleGraph.js';
// ... 其他 import

async function createServer() {
  const moduleGraph = new ModuleGraph();
  const app = connect();
  // ...
}

// mini-vite/server.js
import { parse } from 'es-module-lexer';
// ...

// 脚本编译中间件
app.use(async (req, res, next) => {
  const url = req.url;
  if (url.endsWith('.js') || url.endsWith('.ts')) {
    const filePath = path.join(projectRoot, url);
    let sourceCode = await fs.readFile(filePath, 'utf-8');

    // 1. 获取或创建模块节点
    const mod = moduleGraph.ensureEntry(url);

    // 如果已有缓存，直接返回
    if (mod.transformResult) {
      res.setHeader('Content-Type', 'application/javascript');
      res.end(mod.transformResult.code);
      return;
    }

    // 2. 转换代码
    const { code } = await transformWithEsbuild(sourceCode, { /* ... */ });

    // 3. 解析 imports 并更新模块图
    await parse(code); // 必须先 await parse，否则 lexer 可能未初始化
    const [imports] = parse(code);
    const importedUrls = new Set();
    for (const { s, e } of imports) {
      const importUrl = code.substring(s, e);
      // 简单处理，实际 Vite 更复杂
      if (importUrl.startsWith('./') || importUrl.startsWith('../')) {
        // 将相对路径转换为绝对 URL 路径
        const resolvedUrl = path.join(path.dirname(url), importUrl);
        importedUrls.add(resolvedUrl);
      }
    }
    await moduleGraph.updateModuleInfo(mod, importedUrls);

    // 4. 缓存转换结果并返回
    mod.transformResult = { code };
    res.setHeader('Content-Type', 'application/javascript');
    res.end(code);
    return;
  }
  next();
});

// mini-vite/hmr-client.js
console.log('[mini-vite] HMR client connected.');

// 1. 创建 WebSocket 客户端
// 这里的地址要与服务器端 WebSocket 的地址一致
const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('message', async ({ data }) => {
  const { type, path } = JSON.parse(data);
  if (type === 'update') {
    console.log(`[mini-vite] File updated: ${path}`);
    
    // 2. 动态导入更新的模块
    // 通过在 URL 后附加时间戳，强制浏览器重新请求模块
    await import(`${path}?t=${Date.now()}`);
    
    // 3. 简单起见，我们直接重新加载页面
    // 一个完整的 HMR 实现会在这里执行更复杂的热替换逻辑
    window.location.reload();
  }
});

// mini-vite/server.js
import { WebSocketServer } from 'ws';
import chokidar from 'chokidar';
// ...

async function createServer() {
  // ...
  const server = http.createServer(app);

  // 1. 创建 WebSocket 服务器
  const wss = new WebSocketServer({ server });
  wss.on('connection', (ws) => {
    console.log('[mini-vite] WebSocket client connected.');
    ws.on('message', (msg) => console.log(`Message from client: ${msg}`));
  });

  // 2. 创建文件监听器
  const watcher = chokidar.watch(projectRoot, {
    ignored: ['**/node_modules/**', '**/.git/**'],
    ignoreInitial: true, // 不处理初始化的文件
  });

  // 3. 监听文件变化
  watcher.on('change', async (file) => {
    const url = '/' + path.relative(projectRoot, file).replace(/\/g, '/');
    console.log(`[mini-vite] File changed: ${url}`);

    // 清除模块缓存
    const mod = moduleGraph.getModule(url);
    if (mod) {
      mod.transformResult = null;
    }

    // 通知客户端更新
    wss.clients.forEach((client) => {
      if (client.readyState === 1) { // WebSocket.OPEN
        client.send(JSON.stringify({ type: 'update', path: url }));
      }
    });
  });

  // 4. 向 index.html 注入客户端脚本
  app.use(async (req, res, next) => {
    if (req.url === '/') {
      const indexPath = path.join(projectRoot, 'index.html');
      let html = await fs.readFile(indexPath, 'utf-8');
      // 注入 hmr-client.js
      html = html.replace(
        '</head>',
        '<script type="module" src="/hmr-client.js"></script></head>'
      );
      res.setHeader('Content-Type', 'text/html');
      res.end(html);
      return;
    }
    next();
  });

  // ... 启动服务器
  server.listen(3000, () => { /* ... */ });
}

createServer();