|
| 1 | +# Vite+ 迁移计划 |
| 2 | + |
| 3 | +## 项目概述 |
| 4 | + |
| 5 | +这是一个使用 pnpm workspace 的 monorepo 项目,包含多个 packages 和 themes。 |
| 6 | + |
| 7 | +### 当前工具链 |
| 8 | + |
| 9 | +- **Vite**: ^8.0.0 (catalog) |
| 10 | +- **Vitest**: ^4.1.0 (catalog) |
| 11 | +- **Biome**: 用于 linting 和 formatting |
| 12 | +- **Lefthook**: Git hooks |
| 13 | +- **tsdown**: 库构建工具 |
| 14 | + |
| 15 | +### 项目结构 |
| 16 | + |
| 17 | +- 根目录: `vitest.config.ts`, `biome.jsonc`, `lefthook.yml` |
| 18 | +- Packages: 多个子包,部分有独立的 `vitest.config.ts` |
| 19 | +- Themes: 多个主题,使用 `vite.config.ts` |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## 迁移步骤 |
| 24 | + |
| 25 | +### Phase 1: 预迁移检查 |
| 26 | + |
| 27 | +1. **验证 Vite 和 Vitest 版本** |
| 28 | + - 确认 Vite >= 8.0.0 ✓ (catalog: `^8.0.0`) |
| 29 | + - 确认 Vitest >= 4.1.0 ✓ (catalog: `^4.1.0`) |
| 30 | + |
| 31 | +### Phase 2: 执行迁移命令 |
| 32 | + |
| 33 | +2. **运行 Vite+ 迁移命令** |
| 34 | + |
| 35 | + ```bash |
| 36 | + vp migrate --no-interactive |
| 37 | + ``` |
| 38 | + |
| 39 | + - 这将自动处理大部分迁移工作 |
| 40 | + - 创建 `vite.config.ts` 并整合配置 |
| 41 | + |
| 42 | +### Phase 3: 验证导入重写 |
| 43 | + |
| 44 | +3. **检查 `vite` 导入重写** |
| 45 | + 需要检查的文件: |
| 46 | + - `packages/plugins/vite.config.ts` |
| 47 | + - `packages/create-tona/template-minimal/vite.config.ts` |
| 48 | + - `packages/create-tona/template-preact/vite.config.ts` |
| 49 | + - `themes/shadcn/vite.config.ts` |
| 50 | + - `themes/geek/vite.config.ts` |
| 51 | + - `themes/reacg/vite.config.ts` |
| 52 | + - `packages/tona-vite/src/index.ts` (类型导入) |
| 53 | + |
| 54 | + 预期变更: `from 'vite'` → `from 'vite-plus'` |
| 55 | + |
| 56 | +4. **检查 `vitest` 导入重写** |
| 57 | + 需要检查的测试文件: |
| 58 | + - `packages/create-tona/test/consts.test.ts` |
| 59 | + - `packages/create-tona/test/utils/package.test.ts` |
| 60 | + - `packages/create-tona/test/utils/fs.test.ts` |
| 61 | + - `packages/create-tona/test/strategies/package-manager.test.ts` |
| 62 | + - `packages/create-tona/test/core/context.test.ts` |
| 63 | + - `packages/options/test/index.test.ts` |
| 64 | + - `packages/core/tests/integration.test.ts` |
| 65 | + - `packages/core/tests/createThemeApi.test.ts` |
| 66 | + - `packages/stylelint-one-utility-class-per-line/__tests__/index.test.mjs` |
| 67 | + - `packages/core/tests/shared.test.ts` |
| 68 | + - `packages/core/tests/defineOptions.test.ts` |
| 69 | + |
| 70 | + 预期变更: `from 'vitest'` → `from 'vite-plus/test'` |
| 71 | + |
| 72 | +### Phase 4: 配置整合 |
| 73 | + |
| 74 | +5. **整合配置到 vite.config.ts** |
| 75 | + - 将 `vitest.config.ts` 配置合并到 `vite.config.ts` 的 test block |
| 76 | + - 将 `biome.jsonc` 配置迁移到 `vite.config.ts` 的 lint/fmt block |
| 77 | + - 移除独立的配置文件(如果迁移后不再需要) |
| 78 | + |
| 79 | +6. **更新 package.json scripts** |
| 80 | + 当前 scripts: |
| 81 | + |
| 82 | + ```json |
| 83 | + { |
| 84 | + "dev": "node scripts/dev-theme.ts", |
| 85 | + "build:theme": "node scripts/build-theme.ts", |
| 86 | + "build:pkg": "pnpm -r --filter=./packages/** --parallel run build", |
| 87 | + "docs:dev": "pnpm -C docs run dev", |
| 88 | + "docs:build": "pnpm -C docs run build", |
| 89 | + "typecheck": "vue-tsc --noEmit", |
| 90 | + "release": "tsx scripts/release.ts", |
| 91 | + "publish-ci": "tsx scripts/publish-ci.ts", |
| 92 | + "test": "vitest test", |
| 93 | + "lint": "pnpm exec biome check --write", |
| 94 | + "prepare": "lefthook install" |
| 95 | + } |
| 96 | + ``` |
| 97 | + |
| 98 | + 需要更新的命令映射: |
| 99 | + - `test`: `vitest test` → 使用 `vp test` |
| 100 | + - `lint`: `pnpm exec biome check --write` → 使用 `vp lint` |
| 101 | + - 新增 `fmt`: 使用 `vp fmt` |
| 102 | + - 新增 `check`: 使用 `vp check` (组合了 fmt, lint, typecheck) |
| 103 | + |
| 104 | +### Phase 5: 清理旧依赖 |
| 105 | + |
| 106 | +7. **移除旧依赖**(确认重写后) |
| 107 | + - 从 `devDependencies` 移除 `vite` 和 `vitest` |
| 108 | + - 从 catalog 移除相关版本定义 |
| 109 | + - 移除 `@vitest/ui` 如果不再需要 |
| 110 | + |
| 111 | +8. **清理配置文件** |
| 112 | + - 删除根目录 `vitest.config.ts` |
| 113 | + - 删除 `packages/create-tona/vitest.config.ts` |
| 114 | + - 删除 `packages/options/vitest.config.ts` |
| 115 | + - 可能需要删除或保留 `biome.jsonc`(取决于 Vite+ 是否完全接管) |
| 116 | + - 可能需要删除或保留 `lefthook.yml`(取决于 Vite+ hooks 配置) |
| 117 | + |
| 118 | +### Phase 6: 验证迁移 |
| 119 | + |
| 120 | +9. **运行验证命令** |
| 121 | + ```bash |
| 122 | + vp install # 安装依赖 |
| 123 | + vp check # 运行格式化、lint 和类型检查 |
| 124 | + vp test # 运行测试 |
| 125 | + vp build # 构建项目 |
| 126 | + ``` |
| 127 | + |
| 128 | +--- |
| 129 | + |
| 130 | +## 注意事项 |
| 131 | + |
| 132 | +### 特殊文件处理 |
| 133 | + |
| 134 | +1. **README 文件中的示例代码** |
| 135 | + - `packages/tona-vite/README.md` |
| 136 | + - `packages/tona-vite/README.zh-CN.md` |
| 137 | + - 这些是文档示例,可能不需要修改,或需要更新以反映新的导入方式 |
| 138 | + |
| 139 | +2. **模板文件** |
| 140 | + - `packages/create-tona/template-minimal/vite.config.ts` |
| 141 | + - `packages/create-tona/template-preact/vite.config.ts` |
| 142 | + - 这些是项目模板,需要确保迁移后模板仍然可用 |
| 143 | + |
| 144 | +3. **类型导入** |
| 145 | + - `packages/tona-vite/src/index.ts` 使用了 `import type { ... } from 'vite'` |
| 146 | + - 需要确认类型导入是否也需要更新 |
| 147 | + |
| 148 | +### 子包配置 |
| 149 | + |
| 150 | +- 某些 packages 使用 `tsdown.config.ts` 而非 `vite.config.ts` |
| 151 | +- 这些可能不受 Vite+ 迁移影响,但需要验证 |
| 152 | + |
| 153 | +--- |
| 154 | + |
| 155 | +## 预期结果 |
| 156 | + |
| 157 | +迁移完成后: |
| 158 | + |
| 159 | +1. 统一使用 `vite.config.ts` 作为主配置文件 |
| 160 | +2. 使用 `vp` 命令替代分散的工具命令 |
| 161 | +3. 简化依赖管理 |
| 162 | +4. 保持项目功能不变 |
| 163 | + |
| 164 | +--- |
| 165 | + |
| 166 | +## 回滚方案 |
| 167 | + |
| 168 | +如果迁移出现问题: |
| 169 | + |
| 170 | +1. 恢复 git 中被修改的文件 |
| 171 | +2. 重新安装依赖: `pnpm install` |
| 172 | +3. 检查并恢复必要的配置文件 |
0 commit comments