Skip to content

SCRIPT_HOT_RELOAD_GUIDE.md

Latest commit

 

History

History
264 lines (193 loc) · 5.74 KB

SCRIPT_HOT_RELOAD_GUIDE.md

File metadata and controls

264 lines (193 loc) · 5.74 KB

FFmpeg 脚本热重载使用指南

创建时间: 2025-01-30 目的: 修改 FFmpeg 脚本后无需重启应用

📁 文件结构

项目根目录/
├── scripts/
│   └── mapreduce-refactor.js  ← 📝 外部 FFmpeg 脚本（可动态重载）
├── apps/
│   └── desktop/
│       └── src/
│           └── main/
│               ├── generator.cjs      ← 主进程（启动时加载脚本）
│               └── mapreduce-refactor.js ← 已废弃（仅作备份）

🔄 热重载方法

方法 1: 通过 IPC 调用（推荐）

前端代码：

// 在 React 组件中
const reloadScript = async () => {
  try {
    const result = await window.electron.ipcRenderer.invoke('generator:reload-script');

    if (result.success) {
      console.log('✅ 脚本重新加载成功:', result.message);
      console.log('⏰ 加载时间:', result.timestamp);
      alert('脚本已重新加载！\n' + result.message);
    } else {
      console.error('❌ 脚本加载失败:', result.message);
      alert('脚本加载失败：\n' + result.message);
    }
  } catch (error) {
    console.error('重新加载失败:', error);
    alert('重新加载失败：' + error.message);
  }
};

// 添加按钮（放在设置页面或调试面板）
<button onClick={reloadScript}>
  🔄 重新加载 FFmpeg 脚本
</button>

方法 2: 修改脚本文件后自动提示

在 GeneratorPage.jsx 中添加自动检测：

useEffect(() => {
  // 监听脚本文件修改
  const checkScriptUpdate = async () => {
    const fs = window.require('fs');
    const path = window.require('path');
    const scriptPath = path.join(projectRoot, 'scripts/mapreduce-refactor.js');

    fs.watchFile(scriptPath, { interval: 1000 }, (curr, prev) => {
      if (curr.mtime !== prev.mtime) {
        console.log('📝 检测到脚本文件修改');
        // 提示用户重新加载
        setScriptUpdatePending(true);
      }
    });
  };

  checkScriptUpdate();

  return () => {
    fs.unwatchFile(scriptPath);
  };
}, []);

🛠️ 开发工作流

1. 修改 FFmpeg 脚本

# 编辑外部脚本文件
code scripts/mapreduce-refactor.js

2. 保存文件

# Ctrl+S 保存

3. 重新加载（两种方式）

方式 A：点击按钮

  • 在前端界面点击"🔄 重新加载 FFmpeg 脚本"按钮

方式 B：开发者控制台

// 在浏览器开发者控制台执行
await window.electron.ipcRenderer.invoke('generator:reload-script')

4. 验证加载成功

查看主进程控制台日志：

[ScriptReload] 🔄 重新加载 Map-Reduce 脚本...
[ScriptReload] 脚本路径: F:\...\scripts\mapreduce-refactor.js
[ScriptReload] ✅ 脚本加载成功!
[ScriptReload] 导出的函数: {
  calculateTasks: 'function',
  generateFFmpegCommand: 'function',
  generateReduceCommand: 'function'
}

5. 测试修改

直接生成视频，无需重启应用！

📝 修改示例

示例 1: 修改淡入淡出时长

修改文件: scripts/mapreduce-refactor.js

// 修改前
const FADE_IN_DUR = 0.5;
const FADE_OUT_DUR = 0.5;

// 修改后
const FADE_IN_DUR = 1.0;
const FADE_OUT_DUR = 1.0;

操作:

  1. 保存文件
  2. 点击"重新加载"按钮
  3. 生成视频验证

示例 2: 修改 FFmpeg 滤镜

修改文件: scripts/mapreduce-refactor.js

// 修改前
filterParts.push(`[main_v_0]scale=1920:1080:force_original_aspect_ratio=decrease,boxblur=20[blur_bg]`);

// 修改后（改变模糊强度）
filterParts.push(`[main_v_0]scale=1920:1080:force_original_aspect_ratio=decrease,boxblur=10[blur_bg]`);

⚠️ 注意事项

1. 语法错误会导致加载失败

如果脚本有语法错误，会返回错误信息：

{
  success: false,
  message: "Unexpected token",
  error: "..."
}

解决方法：

  • 查看主进程控制台的详细错误信息
  • 修复语法错误
  • 重新加载

2. 脚本文件必须存在

确保 scripts/mapreduce-refactor.js 文件存在，否则首次启动会失败。

3. 导出的函数不能改名

必须保持以下导出：

module.exports = {
  CONFIG,
  calculateTasks,
  generateFFmpegCommand,
  generateReduceCommand
};

🔧 调试技巧

查看当前加载的脚本

// 在前端执行
const path = window.require('path');
const scriptPath = path.join('...', 'scripts/mapreduce-refactor.js');
console.log('脚本路径:', scriptPath);

// 查看 require 缓存
console.log('缓存状态:', require.cache[require.resolve(scriptPath)]);

清除缓存并重新加载

// 主进程代码已自动处理：
delete require.cache[require.resolve(scriptPath)];

验证函数已更新

// 在前端执行
const result = await window.electron.ipcRenderer.invoke('generator:reload-script');
console.log('导出的函数类型:', Object.keys(result.exports));

📚 相关文件

  • scripts/mapreduce-refactor.js - 外部 FFmpeg 脚本（主要编辑目标）
  • apps/desktop/src/main/generator.cjs - 主进程（包含动态加载逻辑）
  • apps/desktop/src/main/mapreduce-refactor.js - 已废弃（仅作备份参考）

🎯 最佳实践

  1. 开发时

    • 只编辑 scripts/mapreduce-refactor.js
    • 修改后立即点击"重新加载"按钮
    • 快速迭代，无需重启

  2. 测试时

    • 每次修改后重新加载脚本
    • 验证生成的 FFmpeg 命令
    • 确认视频输出符合预期

  3. 生产时

    • 脚本稳定后，可以集成回主进程
    • 或保持外部加载，方便后续维护

文档创建时间: 2025-01-30 功能状态: ✅ 已实现，可立即使用