打开项目以后，先把文件分成六个区域

一个简化的 AI 留言板可能长这样：

ai-message-board/
├── package.json
├── pnpm-lock.yaml
├── .env
├── .env.example
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── components/
│   │   ├── MessageForm.tsx
│   │   └── MessageList.tsx
│   └── api/
│       └── messages.ts
├── server/
│   ├── index.ts
│   ├── routes/
│   │   └── messages.ts
│   └── db.ts
├── public/
│   └── logo.png
└── dist/

目录名不是法律，但能帮助你先缩小范围。

第一类：项目说明和依赖

package.json

告诉包管理器：项目叫什么、需要哪些包、有哪些命令。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "react": "...",
    "express": "..."
  }
}

它像材料清单加操作按钮，不包含已经安装好的所有包文件。

pnpm-lock.yaml

记录这次实际解析出的精确依赖版本。看到它，通常说明项目使用 pnpm。

不要同时生成 package-lock.json 和 yarn.lock，否则团队可能安装出不同结果。

第二类：前端源代码 src/

main.tsx                 把 React 应用挂到 HTML 页面
App.tsx                  页面或应用的主要组件
components/              可复用界面组件
api/messages.ts          前端调用后端的函数

按钮样式、输入框、列表没有刷新，通常从这里开始查。

第三类：后端代码 server/

index.ts                 启动服务器、注册中间件和路由
routes/messages.ts       处理 /api/messages
db.ts                    创建数据库连接

500、环境变量、数据库连接、权限规则通常从这里和服务器日志开始查。

有些框架不会使用 server/：

Flask                 app.py 或 backend/
Next.js App Router    app/api/.../route.ts
Cloudflare Workers    src/worker.ts 等入口

不要只靠目录名，继续看路由和 import。

第四类：公开静态文件 public/

Logo、favicon、字体等可以直接公开访问的文件。

不要把 .env、数据库备份或私钥放进去。public 的意思就是会发布给浏览器。

第五类：环境配置

.env

本地真实配置，可能含数据库地址和秘密。通常不提交 Git。

.env.example

只保留变量名和说明：

DATABASE_URL=
AI_API_KEY=

它告诉协作者需要准备什么，但不泄露真实值。

第六类：生成结果和安装结果

node_modules/

包管理器安装出的依赖目录。通常很大，不手改，也不提交。

dist/

构建命令生成的发布文件。源代码改变后需要重新构建。一般不直接手改，因为下次构建会覆盖。

遇到问题先去哪

按钮没反应             src/components
请求地址错误           src/api
404 路由不存在         server/routes 或 app/api
500 数据库连接失败      server/db 和环境变量
图片 404               public 路径
npm run build 失败      package.json script 和第一条构建错误
依赖找不到             package.json、锁文件、node_modules

不要一次读完整个项目

从一个真实动作追踪：

MessageForm.tsx 的按钮
  ↓ handleSubmit
src/api/messages.ts 的 fetch
  ↓ /api/messages
server/routes/messages.ts
  ↓ db.messages.create
server/db.ts

这条路线外的文件可以暂时不读。

哪些文件不要轻易发给 AI

.env
私钥文件
数据库导出
包含用户隐私的日志
浏览器 Cookie

可以发 .env.example、变量名和脱敏后的错误。

dist 里的 JavaScript 有问题，应该直接修改 dist 文件吗？

答案：通常不应该。dist 是构建产物，下次构建会覆盖。应该找到对应的 src 源文件修改，再重新构建。