feat: 添加对docs/challenges目录的热更新监控

Author: CC11001100

docs/challenges/测试热更新.yml

@@ -0,0 +1,5 @@
+# 爬虫挑战合集元数据配置文件
+version: 1
+id: test-hot-reload
+name: 测试热更新功能
+difficulty: 1

docs/challenges/阿里滑块.yml

@@ -94,3 +94,7 @@ challenges:
     # 记录挑战最后修改时间，格式与create-time相同
     # 当任何字段变更时需同步更新此时间
     update-time: 2025-04-13 10:36:24 
+# 测试热更新
+# 再次测试
+# 测试热更新3
+# 最终测试热更新

package-lock.json

@@ -44,6 +44,7 @@
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "chokidar": "^4.0.3",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.4",
     "gh-pages": "^6.3.0",

package.json

@@ -432,15 +432,30 @@ export default function virtualFileSystemPlugin(
     options: VirtualFileSystemPluginOptions
 ): PluginOption {
     const { directory, outputPath = 'virtual-file-system.js' } = options;
+    // 用于缓存已加载的YAML文件列表
+    let cachedYamlFiles: string[] = [];
+
+    // 打印启动时的监控目录信息
+    console.log(`[VirtualFileSystemPlugin] 监控目录: ${directory}`);
+    console.log(`[VirtualFileSystemPlugin] 输出文件: ${outputPath}`);
 
     return {
         name: 'virtual-file-system-plugin',
         buildStart() {
             // 在这里添加文件监听，当YAML文件或Markdown文件变更时重新构建
             if (fs.existsSync(directory)) {
-                // 监听YAML文件
-                const yamlFiles = getAllYamlFiles(directory);
-                yamlFiles.forEach((file: string) => {
+                console.log(`[VirtualFileSystemPlugin] 开始监控目录: ${directory}`);
+                
+                // 监听整个目录，而不是单独的文件，这样能监控到新增文件
+                this.addWatchFile(directory);
+                
+                // 初始化时扫描一次所有YAML文件
+                cachedYamlFiles = getAllYamlFiles(directory);
+                console.log(`[VirtualFileSystemPlugin] 找到 ${cachedYamlFiles.length} 个YAML文件`);
+                
+                // 监听所有YAML文件
+                cachedYamlFiles.forEach((file: string) => {
+                    console.log(`[VirtualFileSystemPlugin] 添加监控: ${file}`);
                     this.addWatchFile(file);
                 });
 
@@ -449,6 +464,8 @@ export default function virtualFileSystemPlugin(
                 mdFiles.forEach((file: string) => {
                     this.addWatchFile(file);
                 });
+            } else {
+                console.warn(`[VirtualFileSystemPlugin] 警告: 目录 ${directory} 不存在`);
             }
         },
         resolveId(id) {
@@ -471,6 +488,16 @@ export default function virtualFileSystemPlugin(
                     const isBuild = process.env.NODE_ENV === 'production' || this.meta?.watchMode === false;
                     console.log(`VirtualFileSystemPlugin: Running in ${isBuild ? 'build' : 'development'} mode`);
 
+                    // 每次加载时重新扫描所有YAML文件，确保能捕获到新增文件
+                    const currentYamlFiles = getAllYamlFiles(directory);
+                    const newFiles = currentYamlFiles.filter(file => !cachedYamlFiles.includes(file));
+                    
+                    if (newFiles.length > 0) {
+                        console.log(`[VirtualFileSystemPlugin] 检测到 ${newFiles.length} 个新YAML文件`);
+                        // 将新文件添加到缓存
+                        cachedYamlFiles = [...cachedYamlFiles, ...newFiles];
+                    }
+
                     // 收集并处理YAML挑战和Markdown内容
                     const rawChallenges = collectYAMLChallenges(directory, process.cwd(), isBuild);
                     // 使用parseChallenges函数处理成正确的Challenge类型
@@ -482,6 +509,51 @@ export default function virtualFileSystemPlugin(
                 }
             }
             return null;
+        },
+        handleHotUpdate(ctx) {
+            // 检测热更新触发
+            const { file, server } = ctx;
+            
+            // 检查是否是docs/challenges目录下的YAML文件变更，或者是目录变更
+            if (file.includes('docs/challenges')) {
+                // 如果是YAML文件变更或目录变更，触发重新加载
+                const isYamlFile = file.endsWith('.yml') || file.endsWith('.yaml');
+                const isDirectory = fs.existsSync(file) && fs.statSync(file).isDirectory();
+                
+                if (isYamlFile || isDirectory) {
+                    console.log(`[VirtualFileSystemPlugin] 热更新触发: ${file}`);
+                    
+                    // 如果是文件变更，检查是否是新文件
+                    if (isYamlFile && !cachedYamlFiles.includes(file)) {
+                        console.log(`[VirtualFileSystemPlugin] 检测到新YAML文件: ${file}`);
+                        cachedYamlFiles.push(file);
+                    }
+                    
+                    // 如果是目录变更，重新扫描目录以查找新文件
+                    if (isDirectory) {
+                        const currentYamlFiles = getAllYamlFiles(directory);
+                        const newFiles = currentYamlFiles.filter(f => !cachedYamlFiles.includes(f));
+                        
+                        if (newFiles.length > 0) {
+                            console.log(`[VirtualFileSystemPlugin] 目录变更，检测到 ${newFiles.length} 个新YAML文件`);
+                            newFiles.forEach(newFile => {
+                                console.log(`[VirtualFileSystemPlugin] 添加新文件到缓存: ${newFile}`);
+                                cachedYamlFiles.push(newFile);
+                            });
+                        }
+                    }
+                    
+                    // 强制模块失效，触发重新加载
+                    const mod = server.moduleGraph.getModuleById(`/${outputPath}`);
+                    if (mod) {
+                        server.moduleGraph.invalidateModule(mod);
+                    }
+                    
+                    // 告知客户端刷新页面
+                    return ctx.modules;
+                }
+            }
+            return;
         }
     };
 }

src/plugins/VirtualFileSystemPlugin.ts

@@ -3,6 +3,8 @@ import react from '@vitejs/plugin-react'
 import virtualFileSystemPlugin from './src/plugins/VirtualFileSystemPlugin'
 import path from 'path'
 import fs from 'fs'
+import { Plugin } from 'vite'
+import chokidar from 'chokidar'
 
 // 自定义插件：复制Markdown相关的资源文件到dist目录
 function copyMarkdownAssetsPlugin() {
@@ -149,6 +151,75 @@ function getContentType(filePath: string): string {
   }
 }
 
+// 创建一个监控docs/challenges目录变更的自定义插件
+function challengesWatchPlugin(): Plugin {
+  const challengesDir = path.resolve(__dirname, 'docs/challenges');
+  let watcher: any = null;
+  
+  return {
+    name: 'challenges-watch-plugin',
+    configureServer(server) {
+      // 首先打印监控路径信息，确认配置正确
+      console.log(`[challenges-watch] 正在监控目录: ${challengesDir}`);
+      
+      // 使用chokidar监控整个目录，以便检测新文件的创建
+      console.log(`[challenges-watch] 监控目录: ${challengesDir}`);
+      
+      // 创建单独的chokidar监控器，监控目录和所有YAML文件
+      watcher = chokidar.watch([
+        challengesDir, // 监控整个目录以检测新文件
+        path.join(challengesDir, '**/*.yml'), // 监控所有YAML文件
+        path.join(challengesDir, '**/*.yaml') // 监控所有YAML文件
+      ], {
+        ignoreInitial: true, // 初始化时不触发事件
+        persistent: true,
+        ignorePermissionErrors: true,
+        awaitWriteFinish: {
+          stabilityThreshold: 100,
+          pollInterval: 100
+        },
+        // 启用添加目录监控
+        depth: 10, // 监控的目录深度
+        alwaysStat: true // 提供更准确的文件信息
+      });
+      
+      // 监听所有文件事件
+      watcher.on('all', (event: string, filePath: string) => {
+        // 只处理YAML文件相关事件
+        if (filePath.endsWith('.yml') || filePath.endsWith('.yaml')) {
+          console.log(`[challenges-watch] YAML文件事件 ${event}: ${filePath}`);
+          
+          // 通知客户端强制刷新
+          server.moduleGraph.invalidateAll();
+          server.ws.send({
+            type: 'full-reload',
+            path: '*'
+          });
+        } else if (event === 'addDir') {
+          // 新增目录时打印日志
+          console.log(`[challenges-watch] 新增目录: ${filePath}`);
+        }
+      });
+      
+      // 输出正在监控的文件列表
+      setTimeout(() => {
+        const watchedPaths = watcher.getWatched();
+        console.log('[challenges-watch] 已监控的文件/目录:', Object.keys(watchedPaths).length);
+        for (const dir in watchedPaths) {
+          console.log(`[challenges-watch] - ${dir}: ${watchedPaths[dir].length} 个文件`);
+        }
+      }, 1000);
+    },
+    closeBundle() {
+      // 关闭watcher
+      if (watcher) {
+        watcher.close();
+        watcher = null;
+      }
+    }
+  };
+}
+
 // https://vite.dev/config/
 export default defineConfig({
   base: '/crawler-leetcode/',
@@ -159,6 +230,13 @@ export default defineConfig({
       outputPath: 'virtual-challenges.js'
     }),
     copyMarkdownAssetsPlugin(),
-    serveMarkdownAssetsPlugin()
+    serveMarkdownAssetsPlugin(),
+    // 添加自定义监控插件
+    challengesWatchPlugin()
   ],
+  server: {
+    watch: {
+      // 移除ignored配置，改用默认配置
+    }
+  }
 })