# 使用打包框架说明

## ✅ 已完成的修改

Demo 项目现在使用打包好的框架 JS 文件，而不是直接引用源码。

### 修改内容

**文件**: `demo-project/src/main.js`

```javascript
// 修改前（直接使用源码）
import AdminFramework from '../../src/index.js'

// 修改后（使用打包好的框架）
import AdminFramework from './libs/admin-framework.js'
```

### 文件结构

```
demo-project/
├── src/
│   ├── libs/
│   │   └── admin-framework.js  ← 打包好的框架文件
│   ├── main.js                 ← 引用框架的入口文件
│   └── ...
└── ...
```

## 🔄 更新框架的步骤

当框架源码（`src/` 目录）有更新时，需要重新打包并复制到 demo 项目：

### 方法一：使用 PowerShell 命令（推荐）

```powershell
# 1. 在项目根目录打包框架
npm run build

# 2. 复制到 demo 项目
if (-not (Test-Path "demo-project\src\libs")) { 
    New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null 
}
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
Write-Host "✅ 复制成功！" -ForegroundColor Green
```

### 方法二：手动操作

1. **打包框架**
   ```bash
   # 在项目根目录
   npm run build
   ```

2. **复制文件**
   - 将 `dist/admin-framework.js` 复制到 `demo-project/src/libs/admin-framework.js`

3. **重启开发服务器**
   ```bash
   cd demo-project
   npm run dev
   ```

## 📊 优势

### 使用打包框架的优势

1. **✅ 性能更好**
   - 打包后的文件经过优化和压缩
   - 减少了模块解析时间

2. **✅ 更接近生产环境**
   - Demo 项目的使用方式和实际项目一致
   - 更容易发现潜在问题

3. **✅ 依赖隔离**
   - Demo 项目不需要安装框架的所有依赖
   - 减少了依赖冲突的可能性

4. **✅ 更清晰的边界**
   - 框架和业务代码分离更明确
   - 便于理解框架的使用方式

### 使用源码的优势（调试时）

1. **✅ 实时更新**
   - 修改源码后立即生效
   - 不需要重新打包

2. **✅ 调试方便**
   - 可以直接在源码中打断点
   - 错误堆栈更清晰

## 🔧 开发建议

### 开发框架时

**使用源码引用**（临时修改）：
```javascript
// demo-project/src/main.js
import AdminFramework from '../../src/index.js'
```

**优点**：
- 修改框架源码后立即生效
- 方便调试和测试

### 测试框架时

**使用打包文件**（当前配置）：
```javascript
// demo-project/src/main.js
import AdminFramework from './libs/admin-framework.js'
```

**优点**：
- 测试打包后的实际效果
- 发现打包可能引入的问题

## 📝 注意事项

1. **打包后需要复制**
   - 每次修改框架源码并打包后，需要重新复制到 demo 项目
   - 否则 demo 项目使用的还是旧版本

2. **Source Map**
   - 打包时会生成 source map 文件
   - 方便在浏览器中调试打包后的代码

3. **版本管理**
   - `demo-project/src/libs/admin-framework.js` 不应该提交到 Git
   - 应该在 `.gitignore` 中忽略这个文件

4. **依赖更新**
   - 如果框架的依赖有更新，需要重新打包
   - Demo 项目不需要安装框架的依赖

## 🎯 快速命令

### 一键更新框架到 Demo 项目

```powershell
# 打包并复制
npm run build; if (-not (Test-Path "demo-project\src\libs")) { New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null }; Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force; Write-Host "✅ 框架已更新到 Demo 项目！" -ForegroundColor Green
```

### 启动 Demo 项目

```bash
cd demo-project
npm run dev
```

## 📚 相关文件

- `build.bat` / `build.sh` - 框架打包脚本
- `webpack.config.js` - Webpack 配置文件
- `dist/admin-framework.js` - 打包后的框架文件
- `demo-project/src/libs/admin-framework.js` - Demo 项目使用的框架文件
- `demo-project/src/main.js` - Demo 项目入口文件

## 🔍 故障排查

### 问题：修改框架源码后，Demo 项目没有变化

**原因**：Demo 项目使用的是打包后的文件，不会自动更新

**解决方案**：
1. 重新打包框架：`npm run build`
2. 复制到 Demo 项目（使用上面的 PowerShell 命令）
3. 重启 Demo 项目的开发服务器

### 问题：找不到 admin-framework.js 文件

**原因**：还没有复制打包文件到 Demo 项目

**解决方案**：
```powershell
# 确保先打包
npm run build

# 然后复制
if (-not (Test-Path "demo-project\src\libs")) { 
    New-Item -ItemType Directory -Path "demo-project\src\libs" -Force | Out-Null 
}
Copy-Item "dist\admin-framework.js" "demo-project\src\libs\admin-framework.js" -Force
```

### 问题：控制台报错找不到模块

**原因**：可能是打包配置有问题，或者依赖没有正确打包

**解决方案**：
1. 检查 `webpack.config.js` 配置
2. 确保所有依赖都已安装
3. 重新打包：`npm run build`
4. 查看打包日志是否有错误

---

**当前状态**：✅ Demo 项目已配置为使用打包后的框架文件

**下一步**：启动 Demo 项目测试：`cd demo-project && npm run dev`