admin_core/demo-project/使用打包框架说明.md

使用打包框架说明

✅ 已完成的修改

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

修改内容

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

// 修改前（直接使用源码）
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 命令（推荐）

# 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. 打包框架

   # 在项目根目录
   npm run build
   

2. 复制文件

   • 将 dist/admin-framework.js 复制到 demo-project/src/libs/admin-framework.js

3. 重启开发服务器

   cd demo-project
   npm run dev
   

📊 优势

使用打包框架的优势

1. ✅ 性能更好

   • 打包后的文件经过优化和压缩
   • 减少了模块解析时间

2. ✅ 更接近生产环境

   • Demo 项目的使用方式和实际项目一致
   • 更容易发现潜在问题

3. ✅ 依赖隔离

   • Demo 项目不需要安装框架的所有依赖
   • 减少了依赖冲突的可能性

4. ✅ 更清晰的边界

   • 框架和业务代码分离更明确
   • 便于理解框架的使用方式

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

1. ✅ 实时更新

   • 修改源码后立即生效
   • 不需要重新打包

2. ✅ 调试方便

   • 可以直接在源码中打断点
   • 错误堆栈更清晰

🔧 开发建议

开发框架时

使用源码引用（临时修改）：

// demo-project/src/main.js
import AdminFramework from '../../src/index.js'

优点：

• 修改框架源码后立即生效
• 方便调试和测试

测试框架时

使用打包文件（当前配置）：

// 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 项目

# 打包并复制
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 项目

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 项目

解决方案：

# 确保先打包
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