ComfyUI-Lora-Manager/BUILD_WORKFLOW_SOLUTIONS.md

Vue Widget 构建流程解决方案

问题分析

当前配置问题：

• ✅ Vue源代码在 vue-widgets/src/ 中
• ✅ 构建产物输出到 web/comfyui/vue-widgets/
• ❌ 构建产物被 .gitignore 忽略，不会提交到仓库
• ❌ 用户安装后没有构建产物，widget无法工作

解决方案对比

方案1：提交构建产物到Git（推荐 ⭐）

优点：

• ✅ 用户安装即可用，无需额外步骤
• ✅ 最简单可靠
• ✅ 适合大多数ComfyUI用户（不一定有Node.js环境）
• ✅ 与现有ComfyUI插件生态一致

缺点：

• ⚠️ Git仓库略大（每次构建产物变化都会commit）
• ⚠️ 需要确保开发者提交前构建

实现方式：

1. 从 .gitignore 移除 web/comfyui/vue-widgets/
2. 添加 pre-commit hook 自动构建
3. 提交构建产物到仓库

适用场景：

• 生产环境发布
• 用户通过ComfyUI Manager或git clone安装

---

方案2：用户安装时自动构建

优点：

• ✅ Git仓库小，只包含源代码
• ✅ 始终使用最新代码构建
• ✅ 开发者友好

缺点：

• ❌ 要求用户有Node.js环境
• ❌ 安装时间长（需要npm install + build）
• ❌ 可能构建失败影响安装体验
• ❌ ComfyUI Manager可能不支持

实现方式：

1. 保持 .gitignore 设置
2. 添加安装脚本自动检测并构建
3. 在Python __init__.py 启动时检查构建产物

适用场景：

• 开发环境
• 技术用户

---

方案3：混合方案（开发 + 生产分离）

优点：

• ✅ 开发时只提交源代码
• ✅ Release时提供完整构建
• ✅ Git仓库保持干净
• ✅ 用户安装release版本即可用

缺点：

• ⚠️ 需要CI/CD配置
• ⚠️ 工作流稍复杂

实现方式：

1. 开发分支：gitignore构建产物
2. GitHub Actions：自动构建
3. Release分支/Tag：包含构建产物
4. 用户安装release版本

适用场景：

• 成熟项目
• 多人协作开发

---

方案4：Python启动时自动构建（智能方案）

优点：

• ✅ 自动检测是否需要构建
• ✅ 开发模式自动构建
• ✅ 生产模式使用已有构建
• ✅ 最灵活

缺点：

• ⚠️ 需要编写构建检测逻辑
• ⚠️ 首次启动可能较慢

实现方式：

1. 在 __init__.py 中检查构建产物
2. 如果不存在或过期，尝试自动构建
3. 如果无Node.js环境，给出明确提示

适用场景：

• 开发+生产通用
• 技术用户为主

---

推荐实现：方案1 + 方案4 组合

为什么？

1. 对普通用户：提交构建产物，安装即用
2. 对开发者：pre-commit hook确保提交前构建
3. 智能检测：Python启动时检查，开发模式可自动重建

实现步骤

Step 1: 修改 .gitignore（提交构建产物）

# 移除这行：
# web/comfyui/vue-widgets/

# 但保留源码构建缓存：
vue-widgets/node_modules/
vue-widgets/dist/

Step 2: 添加 pre-commit hook

创建 .husky/pre-commit 或使用简单的git hook：

#!/bin/sh
# 在commit前自动构建Vue widgets
cd vue-widgets && npm run build && cd .. && git add web/comfyui/vue-widgets/

Step 3: 在Python中添加智能检测

在 __init__.py 或专门的构建检查模块中：

import os
import subprocess
from pathlib import Path

def check_vue_widgets_build():
    """检查Vue widgets是否已构建，如果需要则自动构建"""
    project_root = Path(__file__).parent
    build_file = project_root / "web/comfyui/vue-widgets/demo-widget.js"
    src_dir = project_root / "vue-widgets/src"

    # 如果构建产物不存在
    if not build_file.exists():
        print("[LoRA Manager] Vue widget build not found, attempting to build...")
        try:
            result = subprocess.run(
                ["npm", "run", "build"],
                cwd=project_root / "vue-widgets",
                capture_output=True,
                timeout=120
            )
            if result.returncode == 0:
                print("[LoRA Manager] ✓ Vue widgets built successfully")
            else:
                print(f"[LoRA Manager] ⚠️  Build failed: {result.stderr.decode()}")
                print("[LoRA Manager] Please run: cd vue-widgets && npm install && npm run build")
        except FileNotFoundError:
            print("[LoRA Manager] ⚠️  Node.js not found. Please install Node.js and run:")
            print("[LoRA Manager]   cd vue-widgets && npm install && npm run build")
        except Exception as e:
            print(f"[LoRA Manager] ⚠️  Build error: {e}")

    # 检查源代码是否比构建产物新（开发模式）
    elif src_dir.exists():
        src_mtime = max(f.stat().st_mtime for f in src_dir.rglob("*") if f.is_file())
        build_mtime = build_file.stat().st_mtime

        if src_mtime > build_mtime:
            print("[LoRA Manager] Source code newer than build, rebuilding...")
            # 同样的构建逻辑

Step 4: package.json 添加便捷脚本

{
  "scripts": {
    "dev": "vite build --watch",
    "build": "vite build",
    "build:check": "node scripts/check-build.js",
    "typecheck": "vue-tsc --noEmit",
    "prepare": "npm run build"
  }
}

---

对于不同场景的建议

场景A：当前开发阶段（快速验证）

使用：方案1（提交构建产物）

# 1. 移除gitignore
# 2. 构建并提交
cd vue-widgets && npm run build && cd ..
git add -f web/comfyui/vue-widgets/
git commit -m "Add Vue widget build output"

场景B：多人协作开发

使用：方案1 + pre-commit hook

• 提交构建产物保证可用性
• Hook确保开发者不会忘记构建

场景C：成熟生产项目

使用：方案3（GitHub Actions）

• main分支不含构建产物
• CI自动构建并发布到release
• 用户安装release tag

---

立即可用的解决方案

最简单方案（推荐现在使用）：

# 1. 修改 .gitignore，移除构建产物忽略
sed -i '/web\/comfyui\/vue-widgets/d' .gitignore

# 2. 添加源码缓存到gitignore
echo "vue-widgets/node_modules/" >> .gitignore
echo "vue-widgets/.vite/" >> .gitignore

# 3. 确保已构建
cd vue-widgets && npm run build && cd ..

# 4. 提交所有文件
git add .
git commit -m "feat: Add Vue + PrimeVue widget scaffold with demo"

这样用户clone后即可直接使用，同时开发者在修改Vue代码后需要手动运行 npm run build。

---

未来改进

可以考虑：

1. 添加 Husky + lint-staged 自动化pre-commit
2. 添加 GitHub Actions 自动构建和发布
3. 编写安装后检查脚本
4. 在ComfyUI Manager元数据中说明Node.js依赖（如果选择方案2）

---

总结

方案	用户体验	开发体验	Git仓库大小	实现难度
方案1	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
方案2	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
方案3	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
方案4	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐

当前阶段推荐：方案1（提交构建产物） 长期推荐：方案1 + 方案4 组合（提交产物 + 智能检测）