207 lines
5.1 KiB
Markdown
207 lines
5.1 KiB
Markdown
# 使用打包框架说明
|
||
|
||
## ✅ 已完成的修改
|
||
|
||
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`
|
||
|