多文件协作开发

让AI管理整个项目——多文件协作与重构

📖知识引入

📦多文件项目

真实软件不是一个文件能搞定的：HTML、CSS、JS分开；JS又分主逻辑、数据、工具函数。多文件让代码清晰、好维护。Trae的文件树帮你管理整个项目结构。

@@引用文件

在AI对话里打@会弹出文件列表，@script.js 让AI先读这个文件再讨论。AI能跨文件理解上下文：「修改@index.html和@script.js让按钮变大」——一次说清两个文件。

🏗️Builder模式

做大项目时切到Builder模式，AI会自主规划：分析需求→决定改哪些文件→按顺序执行→运行验证→自我修复。你说「做一个博客系统」，它能自己创建十几个文件。

🔄跨文件重构

把 greet 改成 sayHello？手动改要找遍所有文件。Trae右键「Rename Symbol」一键改所有引用。重构函数、提取公共逻辑、改文件名——AI帮你搞定跨文件改动。

🌳文件树管理

项目复杂后要分文件夹：components放组件、utils放工具、assets放图片。在文件树拖拽即可移动，Trae自动更新所有引用路径，不用手动改一晚上。

💡

Builder模式让AI当项目经理——你说需求，它规划多文件协作执行！

🔍多文件项目实战

// 多文件项目示例：store.js
let todos = JSON.parse(localStorage.getItem("todos") || "[]");

export function getTodos() { return todos; }
export function save() {
  localStorage.setItem("todos", JSON.stringify(todos));
}

// main.js 引用 store.js
import { getTodos, save } from "./store.js";
import { render } from "./render.js";

function add(text) {
  getTodos().push({ text, done: false });
  save(); render();
}

看一个待办App如何拆分多文件：

原始结构（单文件）： app.js（500行混在一起）

重构后（多文件）：
  project/
  ├─ index.html
  ├─ style.css
  ├─ js/
  │   ├─ main.js       （入口）
  │   ├─ store.js      （数据存取）
  │   ├─ render.js     （渲染逻辑）
  │   └─ utils.js      （工具函数）
  └─ assets/
      └─ icons/

操作演示：

操作1 跨文件改需求你：@store.js @render.js 把保存逻辑改成异步的，渲染时加loading状态。 AI：读懂两个文件，修改store的save为async， render里加loading分支。

操作2 Builder做大项目
切Builder模式，输入：
  「做一个博客系统：
    文章列表、详情、关于三个页面，
    共用顶部导航和底部。」
AI自主规划：
  1.创建index.html等3个页面
  2.创建components/header.html
  3.创建components/footer.html
  4.三个页面引用公共组件
  5.加style.css统一美化

操作3 重命名函数

右键 greet→Rename Symbol

改成 sayHello

所有文件里的greet自动改

不用一个个找！

这就是项目级AI编程：你指挥，AI管理整个代码库。

🎯小测验

第1题：在AI对话里 @文件名的作用是？

第2题：Builder模式最适合做什么？

第3题：把函数 greet 改名 sayHello，最佳做法是？

📝本课知识点

✓真实软件是多文件的，结构要清晰
✓@引用让AI跨文件理解上下文
✓Builder模式做完整多文件项目
✓Rename Symbol跨文件重命名
✓文件树拖拽移动，引用自动更新

第11课完成！继续探索下一课吧 🚀

🏆

上一课

第10课

下一课

第12课

🏆