Skip to content

不要读完整仓库,先回答“我现在要改什么” ​

场景:AI 给你生成了 80 个文件 ​

你想修“点击保存留言没反应”。与这件事有关的可能只有:

text
MessageForm.tsx
messages.ts 前端请求
messages.ts 后端路由
db.ts

Logo、主题、用户设置、测试数据暂时都可以不读。

第一步:看根目录说明 ​

优先找:

text
README.md
package.json
packageManager 字段
锁文件
.env.example
requirements.txt 或 pyproject.toml

先弄清怎样安装、怎样启动、前后端是否分开。

第二步:判断项目是一体还是多项目 ​

单一前端 ​

text
src/
public/
package.json

前后端同仓库 ​

text
src/          前端
server/       后端
package.json

Monorepo ​

text
apps/web/
apps/api/
packages/ui/
pnpm-workspace.yaml

Monorepo 是一个仓库管理多个应用或共享包。不要在根目录随便运行每个子项目的命令,先看 workspace 说明。

第三步:找入口 ​

常见入口线索:

text
React / Vite     src/main.tsx → App.tsx
Next.js          app/page.tsx、app/layout.tsx
Flask            app.py
Express          server.ts、index.ts
Cloudflare       Worker 配置指向的入口

入口告诉你应用怎样开始,不代表所有功能都写在入口里。

第四步:按功能搜索,不按目录猜 ​

页面按钮写“保存留言”,全局搜索这段文字或函数名。

text
保存留言
  ↓ onClick={handleSubmit}
handleSubmit
  ↓ saveMessage(text)
saveMessage
  ↓ fetch('/api/messages')
/api/messages
  ↓ 后端路由
db.messages.create

这是最实用的读代码路线。

第五步:用 Import 看依赖方向 ​

ts
import { saveMessage } from '../api/messages'

说明当前组件使用 api/messages 提供的函数。继续打开被导入文件,不必先读同目录其他全部文件。

第六步:区分源代码和生成文件 ​

通常不直接修改:

text
node_modules/
dist/
build/
.next/
覆盖率报告
自动生成类型

真正源代码常在 src、app、server、api 等目录。

第七步:确认前后端边界 ​

看到下面线索问运行地点:

text
window、document、onClick       浏览器前端
app.post、@app.route           后端
process.env 秘密变量            后端
fetch                          可能前端,也可能后端,要看文件运行位置

给 AI 的项目地图 Prompt ​

text
请先不要修改代码。
根据 README、package.json 和目录结构回答:
1. 前端入口在哪里
2. 后端入口在哪里
3. 保存留言按钮在哪个组件
4. 它调用哪个 API
5. API 路由和数据库代码在哪里
6. 本地启动前端、后端和构建的命令
每个结论必须给出实际文件路径。

这会迫使 AI 先搜索证据,而不是编造常见路径。

什么时候目录名会骗人 ​

components 里可能包含数据请求,utils 里可能有关键业务逻辑,api 也可能只是前端请求封装。名字只是地图标签,最终要看代码和调用关系。

一个功能阅读记录表 ​

text
用户操作:
页面组件:
事件函数:
请求函数:
API 地址和方法:
后端路由:
数据库或外部服务:
返回数据:
前端更新位置:
项目里有 server 文件夹,是否能直接断定所有后端逻辑都只在这里?

答案:不能。目录名只是线索。Next.js API 可能在 app/api,Server Actions 也可能分散;要结合入口、路由和运行环境判断。

写给想驾驭 AI,而不只是依赖 AI 的 Vibe Coder。