基于 FX Toolbox 项目的实战经验总结
📋 目录
项目初始化
1. 创建 Tauri 项目
bash
123456789
# 使用官方脚手架
npm create tauri-app@latest
# 选择配置
✔ Project name · my-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript
✔ Choose your package manager · npm
✔ Choose your UI template · React
✔ Choose your UI flavor · TypeScript
2. 初始化 Git 仓库
bash
1234
cd my-app
git init
git add .
git commit -m "Initial commit: Create Tauri project with React + TypeScript"
3. 创建 GitHub 仓库并推送
bash
1234
# 在 GitHub 创建仓库后
git remote add origin https://github.com/username/repo-name.git
git branch -M main
git push -u origin main
4. 创建项目文档
建议创建以下文档:
-
README.md- 项目介绍、安装和使用说明 -
CLAUDE.md- AI 开发助手的项目上下文(如果使用 Claude Code) -
CHANGELOG.md- 版本更新日志 -
.gitignore- Git 忽略规则
日常开发流程
开发环境启动
bash
12345
# 安装依赖(首次或依赖变更时)
npm install
# 启动开发服务器
npm run tauri:dev
重要提示:
- ⚠️ Tauri 项目必须使用
npm run tauri:dev,不要单独运行npm run dev - 首次运行会编译 Rust 依赖,耗时较长(5-10分钟),后续启动会快很多
- 开发模式支持热重载(前端代码修改即时生效,后端 Rust 代码需重启)
开发循环
plaintext
123456789
1. 编写代码
↓
2. 本地测试(npm run tauri:dev)
↓
3. 修复 Bug / 调整功能
↓
4. 重复 1-3 直到功能完成
↓
5. 提交代码(见下一节)
构建测试
在提交前,建议进行生产环境构建测试:
bash
123456
# 构建生产版本
npm run tauri:build
# 构建产物位置
# macOS: src-tauri/target/release/bundle/dmg/
# Windows: src-tauri/target/release/bundle/msi/
代码提交规范
1. 提交前检查
bash
123456
# 查看修改内容
git status
git diff
# 确保没有遗漏重要文件
# 确保没有提交敏感信息(密钥、配置等)
2. 暂存修改
bash
123456
# 暂存所有修改
git add .
# 或选择性暂存
git add src/components/Feature.tsx
git add src-tauri/src/commands/api.rs
3. 提交规范
使用语义化提交信息(Conventional Commits):
bash
12345678910111213141516
# 格式:<type>: <subject>
#
# type 类型:
# - feat: 新功能
# - fix: Bug 修复
# - docs: 文档更新
# - style: 代码格式调整(不影响功能)
# - refactor: 重构(不新增功能也不修复 Bug)
# - perf: 性能优化
# - test: 测试相关
# - chore: 构建/工具配置
# 示例:
git commit -m "feat: Add dark mode toggle to settings"
git commit -m "fix: Resolve image upload timeout issue"
git commit -m "docs: Update README with installation instructions"
多行提交信息示例:
bash
1234567891011
git commit -m "$(cat <<'EOF'
feat: Add batch image processing with progress tracking
- Implement concurrent upload with configurable limit (max 5)
- Add real-time progress bar for each image
- Handle upload failures with retry mechanism
- Update UI to show processing status
Closes #42
EOF
)"
4. 推送到远程
bash
12345
# 推送到主分支
git push
# 首次推送新分支
git push -u origin feature-branch-name
版本发布流程
准备工作
在发布新版本前,确保:
- ✅ 所有计划功能已完成并测试
- ✅ 代码已提交到 main 分支
- ✅ 本地构建成功(
npm run tauri:build) - ✅ 更新了 CHANGELOG.md(如果有)
Step 1: 更新版本号
Tauri 项目需要同步更新 3 个文件 的版本号:
bash
12345678910111213
# 1. package.json
{
"version": "0.3.0" # 修改这里
}
# 2. src-tauri/Cargo.toml
[package]
version = "0.3.0" # 修改这里
# 3. src-tauri/tauri.conf.json
{
"version": "0.3.0" # 修改这里
}
版本号规范(语义化版本 Semantic Versioning):
plaintext
12345678910
主版本号.次版本号.修订号 (MAJOR.MINOR.PATCH)
- MAJOR: 不兼容的 API 变更(如 1.0.0 → 2.0.0)
- MINOR: 向下兼容的功能新增(如 1.2.0 → 1.3.0)
- PATCH: 向下兼容的 Bug 修复(如 1.2.3 → 1.2.4)
示例:
0.1.0 → 0.1.1 (Bug 修复)
0.1.1 → 0.2.0 (新功能)
0.9.0 → 1.0.0 (正式版本)
Step 2: 提交版本更新
bash
12345678
# 暂存版本文件
git add package.json src-tauri/Cargo.toml src-tauri/tauri.conf.json
# 提交(使用统一格式)
git commit -m "chore: Bump version to 0.3.0"
# 推送到远程
git push
Step 3: 创建 Git Tag
bash
12345678
# 创建带版本号的 tag
git tag v0.3.0
# 推送 tag 到远程
git push origin v0.3.0
# 验证 tag 已创建
git tag -l
Step 4: 创建 GitHub Release
方法 1:使用 GitHub CLI(推荐)
bash
123456789101112131415161718
gh release create v0.3.0 \
--title "v0.3.0 - Feature Name" \
--notes "$(cat <<'EOF'
## ✨ New Features
- Add support for batch image processing
- Implement progress tracking for uploads
## 🐛 Bug Fixes
- Fix timeout issue on slow networks
- Resolve metadata encoding errors
## 📝 Documentation
- Update README with new configuration options
---
**Full Changelog**: https://github.com/username/repo/compare/v0.2.0...v0.3.0
EOF
)"
方法 2:使用 GitHub Web UI
- 访问仓库的 Releases 页面
- 点击 “Draft a new release”
- 选择 tag:
v0.3.0 - 填写 Release title:
v0.3.0 - Feature Name - 填写 Release notes(参考上面的格式)
- 可选:上传构建产物(.dmg / .msi 文件)
- 点击 “Publish release”
Step 5: 验证发布
bash
12345
# 查看远程 releases
gh release list
# 查看特定 release 详情
gh release view v0.3.0
Bug 修复与热更新
场景 1: 紧急 Bug 修复
bash
123456789101112131415161718192021222324
# 1. 切换到 main 分支
git checkout main
git pull
# 2. 修复 Bug
# ... 编辑代码 ...
# 3. 提交修复
git add .
git commit -m "fix: Resolve critical crash on startup"
git push
# 4. 发布补丁版本
# 更新版本号(如 0.3.0 → 0.3.1)
# 编辑 package.json, Cargo.toml, tauri.conf.json
git add package.json src-tauri/Cargo.toml src-tauri/tauri.conf.json
git commit -m "chore: Bump version to 0.3.1"
git push
# 5. 创建 tag 和 release
git tag v0.3.1
git push origin v0.3.1
gh release create v0.3.1 --title "v0.3.1 - Hotfix" --notes "Fix critical startup crash"
场景 2: 已发布版本需要回滚
bash
12345678910111213141516
# 1. 找到要回滚的版本
git log --oneline
# 2. 创建回滚分支
git checkout -b revert-to-v0.2.0 v0.2.0
# 3. 更新版本号(如 0.3.0 → 0.2.1)
# 编辑 3 个版本文件
# 4. 提交并发布
git add .
git commit -m "chore: Revert to v0.2.0 due to critical issue"
git push -u origin revert-to-v0.2.0
# 5. 创建 PR 合并回 main
gh pr create --title "Revert to v0.2.0" --body "Emergency rollback"
协作开发最佳实践
分支策略
plaintext
123456
main (生产分支)
├── develop (开发分支)
│ ├── feature/dark-mode
│ ├── feature/export-data
│ └── fix/upload-timeout
└── hotfix/critical-bug
功能开发流程
bash
123456789101112131415161718
# 1. 创建功能分支
git checkout -b feature/dark-mode
# 2. 开发功能
# ... 编写代码 ...
# 3. 提交到功能分支
git add .
git commit -m "feat: Add dark mode toggle"
git push -u origin feature/dark-mode
# 4. 创建 Pull Request
gh pr create \
--title "Add dark mode support" \
--body "Implements dark mode with user preference persistence"
# 5. Code Review 后合并到 main
gh pr merge --squash
同步远程更新
bash
1234567
# 拉取最新代码
git pull
# 如果有冲突,解决后
git add .
git commit -m "Merge remote changes"
git push
CI/CD 自动化(可选)
GitHub Actions 配置示例
创建 .github/workflows/release.yml:
yaml
12345678910111213141516171819202122232425262728293031323334353637
name: Release Build
on:
push:
tags:
- 'v*'
jobs:
build:
strategy:
matrix:
platform: [macos-latest, windows-latest]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Setup Rust
uses: dtolnay/rust-toolchain@stable
- name: Install dependencies
run: npm install
- name: Build Tauri app
run: npm run tauri:build
- name: Upload artifacts
uses: actions/upload-artifact@v4
with:
name: app-${{ matrix.platform }}
path: src-tauri/target/release/bundle/
常见问题
Q1: 忘记更新某个版本文件怎么办?
bash
12345
# 修改遗漏的文件
# 然后修正最后一次提交
git add src-tauri/Cargo.toml
git commit --amend --no-edit
git push --force
⚠️ 注意:只在未推送或未发布的提交上使用 --amend
Q2: Tag 打错了怎么删除?
bash
123456789
# 删除本地 tag
git tag -d v0.3.0
# 删除远程 tag
git push origin --delete v0.3.0
# 重新创建
git tag v0.3.0
git push origin v0.3.0
Q3: 如何查看两个版本之间的变更?
bash
12345678
# 查看 commit 差异
git log v0.2.0..v0.3.0 --oneline
# 查看代码差异
git diff v0.2.0..v0.3.0
# 查看特定文件的差异
git diff v0.2.0..v0.3.0 -- src/App.tsx
总结检查清单
开发阶段
- 功能开发完成并测试通过
- 代码符合项目规范
- 提交信息清晰明确
- 无敏感信息泄露
发布阶段
- 更新 3 个文件的版本号
- 提交版本更新并推送
- 创建并推送 Git tag
- 创建 GitHub Release
- 编写详细的 Release Notes
- (可选)上传构建产物
发布后
- 验证 Release 页面显示正常
- 通知用户/团队新版本发布
- 监控用户反馈和 Bug 报告
相关资源
文档版本: 1.0.0 最后更新: 2025-10-23 基于项目: FX Toolbox (Tauri + React + Rust)