2
0
Просмотр исходного кода

✨ feat(vite): 集成编译进度跟踪插件
- 新增vite-plugin-compile-progress.js文件实现编译进度UI展示
- 在Vite配置中添加进度跟踪插件,显示编译进度条
- 添加进度条样式和客户端更新逻辑

🐛 fix(socket): 修复Socket.IO模块加载错误处理
- 为Socket.IO模块加载添加try/catch错误处理
- 防止开发环境下Socket.IO模块加载失败导致服务崩溃

♻️ refactor(server): 调整服务器配置和日志输出
- 注释掉全局logger中间件以减少日志输出
- 优化Vite开发服务器配置格式和注释
- 调整代码缩进和空行以提高可读性

yourname 7 месяцев назад
Родитель
Сommit
6c7b02f48e
2 измененных файлов с 121 добавлено и 16 удалено
  1. 27 16
      server.js
  2. 94 0
      vite-plugin-compile-progress.js

+ 27 - 16
server.js

@@ -12,13 +12,14 @@ import process from 'node:process';
 import { createAdaptorServer } from '@hono/node-server'
 // 新增:导入 Socket.IO
 import { Server } from 'socket.io';
+import { progressTrackingPlugin} from './vite-plugin-compile-progress.js';
 
 
 // 创建 Hono 应用
 const app = new Hono();// API路由
 
 // 全局使用 Hono 日志中间件(记录所有请求)
-app.use('*', logger());
+// app.use('*', logger());
 app.use('*', cors(
   // {
   //   origin: ['http://localhost:3000'],
@@ -86,11 +87,14 @@ let vite;
 if (!isProduction) {
   console.log('开发环境: 初始化 Vite 开发服务器...');
   const { createServer } = await import('vite');
+  
+  
   vite = await createServer({
-    server: { middlewareMode: {
+    server: {
+      middlewareMode: {
         server: parentServer
       },
-      hmr: {  
+      hmr: {
         port: 8081,
         clientPort: 443,
         path: 'vite-hmr'
@@ -104,6 +108,9 @@ if (!isProduction) {
     },
     appType: 'custom',
     base,
+    plugins: [
+      progressTrackingPlugin(),
+    ],
   });
   console.log('Vite 开发服务器初始化完成');
 }
@@ -124,20 +131,24 @@ if (!isProduction) {
 // 新增:加载 Socket.IO 中间件和路由
 if (!isProduction) {
   console.log('开发环境: 从 Vite 加载 Socket.IO 路由和中间件...');
-  const socketModule = await vite.ssrLoadModule('./src/server/socket.ts');
-  
-  // 应用认证中间件
-  if (socketModule.authMiddleware) {
-    console.log('应用 Socket.IO 认证中间件');
-    io.use(socketModule.authMiddleware);
-  }
-  
-  // 应用路由
-  if (socketModule.default) {
-    console.log('注册 Socket.IO 路由处理');
-    socketModule.default(io);
+  try {
+    const socketModule = await vite.ssrLoadModule('./src/server/socket.ts');
+    
+    // 应用认证中间件
+    if (socketModule.authMiddleware) {
+      console.log('应用 Socket.IO 认证中间件');
+      io.use(socketModule.authMiddleware);
+    }
+    
+    // 应用路由
+    if (socketModule.default) {
+      console.log('注册 Socket.IO 路由处理');
+      socketModule.default(io);
+    }
+    console.log('Socket.IO 路由和中间件加载完成');
+  } catch (err) {
+    console.error('开发环境加载 Socket.IO 模块失败:', err);
   }
-  console.log('Socket.IO 路由和中间件加载完成');
 } else {
   console.log('生产环境: 加载编译后的 Socket.IO 路由和中间件...');
   try {

+ 94 - 0
vite-plugin-compile-progress.js

@@ -0,0 +1,94 @@
+export function progressTrackingPlugin() {  
+    let server
+    const moduleStats = {  
+      total: 0,  
+      processed: 0,  
+      pending: new Set()  
+    }  
+    
+    return {  
+      name: 'progress-tracking',  
+      apply: 'serve',
+      enforce: 'pre',  
+      configureServer(_server) {  
+        server = _server  
+      },  
+      async transform(code, id) {  
+        if (server && id) {  
+          moduleStats.total++  
+          moduleStats.pending.add(id)
+            
+          // 发送进度更新到客户端  
+          server.ws.send('progress:update', {  
+            total: moduleStats.total,  
+            processed: moduleStats.processed,  
+            current: id  
+          })  
+            
+          // 等待依赖处理完成  
+          await server.waitForRequestsIdle(id)  
+            
+          moduleStats.processed++  
+          moduleStats.pending.delete(id)  
+            
+          // 发送完成状态  
+          server.ws.send('progress:update', {  
+            total: moduleStats.total,  
+            processed: moduleStats.processed,  
+            current: null  
+          })  
+        }  
+      },  
+      transformIndexHtml: {  
+        order: 'pre', // 在 Vite 内部转换之前执行  
+        handler(html, ctx) {  
+          return {  
+            html,  
+            tags: [  
+              {  
+                tag: 'style',  
+                children: `  
+                  #vite-progress-bar {  
+                    position: fixed;  
+                    top: 0;  
+                    left: 0;  
+                    width: 0%;  
+                    height: 3px;  
+                    background: #646cff;  
+                    transition: width 0.3s;  
+                    z-index: 9999;  
+                  }  
+                `,  
+                injectTo: 'head'  
+              },  
+              {  
+                tag: 'div',  
+                attrs: { id: 'vite-progress-bar' },  
+                injectTo: 'body-prepend'  
+              },  
+              {  
+                tag: 'script',  
+                attrs: { type: 'module' }, // 关键:添加 type="module"  
+                children: `  
+                  if (import.meta.hot) {  
+                    import.meta.hot.on('progress:update', (data) => {  
+                      console.log('data',data)
+                      const bar = document.getElementById('vite-progress-bar');  
+                      if (bar) {  
+                        const percentage = (data.processed / data.total) * 100;  
+                        bar.style.width = percentage + '%';  
+                        if (percentage >= 100) {  
+                          setTimeout(() => bar.style.display = 'none', 1000);  
+                        }  
+                      }  
+                    });  
+                  }  
+                `,  
+                injectTo: 'body'  
+              }  
+            ]  
+          }  
+        }  
+      }  
+    }  
+  }