如何在Vite中重启SSR脚本？解决后端代码更新问题

针对你用Vite Dev Server的ssrLoadModule运行后端SSR代码，修改脚本或依赖后无法热更新的问题，提供两种可行方案：

方案一：实现SSR代码的模块热替换（HMR） #

Node环境下的HMR需要手动处理模块更新与资源清理，步骤如下：

1. 改造后端服务文件（server/main.ts） #

导出服务启停方法，并添加HMR处理逻辑：

import express from 'express';
const app = express();
let serverInstance;

// 你的User CRUD API逻辑
app.use(express.json());
app.get('/users', (req, res) => {
  // 示例逻辑
  res.json([{ id: 1, name: 'Test User' }]);
});
// 其他CRUD接口...

// 启动服务方法
function startServer() {
  serverInstance = app.listen(3000, () => {
    console.log('Express server running on port 3000');
  });
}

// 停止服务方法
function stopServer() {
  return new Promise((resolve) => {
    if (serverInstance) {
      serverInstance.close(() => {
        console.log('Server closed for HMR update');
        resolve(true);
      });
    } else {
      resolve(true);
    }
  });
}

// 初始化启动
startServer();

// 处理HMR更新
if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(() => {
    stopServer();
  });
}

export { startServer, stopServer };

2. 修改Vite启动脚本 #

监听HMR更新事件，清除旧模块缓存并重新加载服务：

import { createServer } from 'vite';
import path from 'path';

let viteServer;
let currentModule;

async function initServer() {
  viteServer = await createServer({
    mode: 'development',
    appType: 'custom',
    root: path.join(process.cwd(), 'server'),
    build: {
      ssr: 'server/main.ts'
    },
    server: {
      hmr: true
    },
    ssr: {
      format: 'cjs',
      target: 'node'
    },
    plugins: []
  });

  // 加载初始模块
  currentModule = await viteServer.ssrLoadModule('server/main.ts');

  // 监听模块更新
  viteServer.ws.on('update', async (updatedModules) => {
    // 判断是否为后端相关文件更新
    const hasBackendChanges = updatedModules.some(module => 
      module.file.includes('server/main.ts') || module.file.includes('server/user.ts')
    );

    if (hasBackendChanges) {
      // 停止旧服务
      await currentModule.stopServer();
      
      // 清除Node模块缓存
      Object.keys(require.cache).forEach(cacheKey => {
        if (cacheKey.includes(path.join(process.cwd(), 'server'))) {
          delete require.cache[cacheKey];
        }
      });

      // 重新加载模块并启动服务
      currentModule = await viteServer.ssrLoadModule('server/main.ts');
      console.log('SSR backend reloaded via HMR');
    }
  });
}

initServer();

方案二：自动重启整个服务（简单粗暴） #

如果HMR实现复杂，可使用nodemon监听文件变化，自动重启整个Node进程：

1. 安装依赖 #

npm install nodemon --save-dev

2. 添加启动脚本 #

在package.json中添加dev脚本：

{
  "scripts": {
    "dev": "nodemon --watch server --ext ts,js --exec \"node your-vite-start-script.js\""
  }
}

将your-vite-start-script.js替换为你实际的Vite启动脚本文件名。

这种方式会在server目录下的ts/js文件修改时，重启整个Node进程，Vite会重新初始化服务并加载最新代码，缺点是服务会短暂中断，但实现成本极低。

内容的提问来源于stack exchange，提问作者Harshal Patil