mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-26 23:48:52 -03:00
feat: add Vue widget demo node and development support
- Add LoraManagerDemoNode to node mappings for Vue widget demonstration - Update .gitignore to exclude Vue widget development artifacts (node_modules, .vite, dist) - Implement automatic Vue widget build check in development mode with fallback handling - Maintain pytest compatibility with proper import error handling
This commit is contained in:
Will Miao
267
BUILD_WORKFLOW_SOLUTIONS.md
Normal file
267
BUILD_WORKFLOW_SOLUTIONS.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# 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（提交构建产物）
|
||||
|
||||
```bash
|
||||
# 移除这行：
|
||||
# web/comfyui/vue-widgets/
|
||||
|
||||
# 但保留源码构建缓存：
|
||||
vue-widgets/node_modules/
|
||||
vue-widgets/dist/
|
||||
```
|
||||
|
||||
#### Step 2: 添加 pre-commit hook
|
||||
|
||||
创建 `.husky/pre-commit` 或使用简单的git hook：
|
||||
```bash
|
||||
#!/bin/sh
|
||||
# 在commit前自动构建Vue widgets
|
||||
cd vue-widgets && npm run build && cd .. && git add web/comfyui/vue-widgets/
|
||||
```
|
||||
|
||||
#### Step 3: 在Python中添加智能检测
|
||||
|
||||
在 `__init__.py` 或专门的构建检查模块中：
|
||||
```python
|
||||
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 添加便捷脚本
|
||||
|
||||
```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（提交构建产物）**
|
||||
```bash
|
||||
# 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
|
||||
|
||||
---
|
||||
|
||||
## 立即可用的解决方案
|
||||
|
||||
### 最简单方案（推荐现在使用）：
|
||||
|
||||
```bash
|
||||
# 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 组合（提交产物 + 智能检测）**
|
||||
Reference in New Issue
Block a user