实际编写

实际编写#

区分了脚本和前端界面, 我们现在可以实际编写它; 如果你不知道酒馆助手提供了哪些功能, 可以查阅酒馆助手文档.

以下内容你都可以先用示例角色卡、src/脚本示例 和 src/界面示例 先过一遍.

完整流程#

在初始模板文件夹中, 我分别给出了脚本和前端界面项目所需的初始文件. 此处以编写前端界面为例, 而脚本的编写流程与之类似.

为了创建前端界面项目, 你需要将初始模板/前端界面/新建为src文件夹中的文件夹复制到 src 文件夹中, 将它重命名为你想要的名称:

../../../../_images/%E5%88%9B%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE.png

然后我们让 Cursor 等 AI 编程助手为我们编写代码:

为我在`手机角色状态栏`中编写前端界面
它应该是一个手机风格的角色状态栏, 该手机页面应当包含边框、刘海、聊天界面等, 并显示有角色当前的状态

编写完毕后, 我们在终端执行 pnpm build 来打包代码.

如果该操作执行失败, 你可以让 AI 检查错误原因并修复它. 一般直接问 AI 即可, 也可以自己在终端中选中错误信息然后 Add to Chat.

../../../../_images/%E6%89%93%E5%8C%85%E5%A4%B1%E8%B4%A5.png

如果该操作执行成功, 则会在 dist 文件夹中找到 pnpm build 对新项目的打包结果:

../../../../_images/%E6%89%93%E5%8C%85%E6%88%90%E5%8A%9F.png

这个打包结果是单个 html 文件 (如果是脚本则是单个 js 文件), 它包含了项目中所有文件的代码, 因此你可以将它用代码块包裹 (在之前的阅读示例中有解释) 然后复制到酒馆正则中的替换为部分 (如果是脚本则直接复制到酒馆助手脚本库中).
如果这个酒馆正则被应用, 酒馆助手就会自动渲染出前端界面:

../../../../_images/%E6%B8%B2%E6%9F%93%E7%BB%93%E6%9E%9C.png

这就是我们项目的整个流程:

  1. 在 src 文件夹中新建项目

  2. 让 AI 在这个项目中编写代码

  3. 用 pnpm build 将项目打包成一个文件

  4. 将 dist 文件夹中的打包结果用代码块包裹后复制到酒馆正则中 (如果是脚本则直接复制到酒馆助手脚本库中)

但 AI 会听不懂我们的要求或犯错, 一次编写很可能无法写出我们想要的脚本或前端界面. 这又该如何是好呢? 难道我们每次让 AI 修改了代码, 都要重新 pnpm build 打包代码, 再手动复制粘贴到酒馆中来验证?

不, 我们更希望:

  • 对脚本和前端界面的修改能实时更新到酒馆中

  • AI 能自己查看酒馆网页来理解你说的要求或问题

  • (有代码基础的人) 能够自行查看代码执行情况来定位错误

将修改实时更新到酒馆#

假设我们已经从初始模板中创建了前端界面项目界面示例, 我们希望将它的最新内容实时更新到酒馆中.

回顾一下如果没有实时修改, 我们是如何修改项目并更新到酒馆中的:

  • 让 AI 修改代码

  • 重新 pnpm build 打包代码

  • 将 dist 文件夹中的打包结果用代码块包裹后复制到酒馆正则中 (如果是脚本则直接复制到酒馆助手脚本库中)

因此, 我们需要实现 "重新 pnpm build 打包代码" 和 "将打包结果用代码块包裹后复制到酒馆正则中" 的自动化.

项目被修改后自动打包#

要做到项目被修改后自动打包, 我们不再运行 pnpm build, 而是运行 pnpm watch. watch 意为监听, 也就是说, pnpm watch 会监听项目中的文件变化, 并在变化时自动重新打包代码.

当然你可能不想记那么多命令, 也可以修改 .vscode/launch.json 中的 url 为自己的酒馆地址 (例如 http://localhost:6622), 然后通过 F5 运行调试任务. 这会为我们运行 pnpm build 并打开酒馆网页.

../../../../_images/%E6%9B%B4%E6%94%B9launch.png

将打包结果实时更新到酒馆#

为了让酒馆页面实时加载最新的打包结果, 我们不能是再自己手动复制打包结果到酒馆正则中, 而要让酒馆页面自动加载它. 这需要:

  • 让酒馆知道打包结果发生了变化并在变化时重新加载脚本和前端界面: 我们需要将酒馆与打包监听器 pnpm watch 连接

  • 让酒馆在重新加载时能获取到最新打包结果: 我们可以将打包结果文件映射为网络链接, 在酒馆里填写这个网络链接而不是自己每次复制粘贴, 则酒馆重新加载脚本和前端界面时会重新访问这个链接, 从而得到最新的打包结果

将酒馆与打包监听器连接#

酒馆助手已经为我们实现了酒馆与打包监听器 pnpm watch 的连接, 我们从酒馆助手 ‣ 实时监听中启用允许监听即可.

如果我们已经运行 pnpm watch 或 F5, 则实时监听右边的 WiFi 图标会变成绿色, 这意味着酒馆已经能知道打包结果是否发生变化.

../../../../_images/%E5%90%AF%E7%94%A8%E5%AE%9E%E6%97%B6%E7%9B%91%E5%90%AC.png

将最新打包结果以链接形式导入#

我们点击 Cursor 右下角的 Go Live 来将文件夹中所有文件映射成一个网络链接:

../../../../_images/%E5%90%AF%E5%8A%A8live_server.png

在点击后, Go Live 将会变成 port: xxxx. 以 port: 5500 为例, 这意味着你将能在 http://localhost:5500 访问文件夹下的文件:

../../../../_images/%E8%AE%BF%E9%97%AE%E6%96%87%E4%BB%B6.png

而打包结果 dist/界面示例/index.html 将能以 http://localhost:5500/dist/界面示例/index.html 访问.

有了这个链接, 我们接下来更换酒馆正则替换为部分的 html 代码块, 让它从 http://localhost:5500/dist/界面示例/index.html 加载 html:

```text
<body>
  <script>
    $('body').load('http://localhost:5500/dist/界面示例/index.html')
  </script>
</body>
```

这正是初始模板/前端界面/导入到酒馆中的实时修改正则和初始模板/脚本/导入到酒馆中的实时修改脚本所做的事情, 以后你可以直接导入它们, 然后将其中的链接替换为你的打包结果链接.

让 AI 能看到酒馆页面#

要让 AI 能看到酒馆页面, 我们使用 Browser MCP.

模板文件夹已经为很多编程助手配置了 Browser MCP (见于环境准备), 我们唯一要做的是安装它所需要的浏览器扩展.

我们按 F5 打开调试用浏览器后 (或自行 pnpm watch 然后使用你自己的浏览器), 从 chrome 应用商店安装最新的浏览器扩展.

如此, 我们回到酒馆网页, 点击扩展图标然后点击 连接 即可.

../../../../_images/%E8%BF%9E%E6%8E%A5browser_mcp.png

你的 AI 编程助手现在可以:

  • 读取酒馆网页显示情况、控制台 (Console) 日志情况、网络情况

  • 读取你通过 开发者工具 ‣ 左上角的选择元素 选择到的网页元素

断点调试错误#

可能太专业因而不详细解释: 这个项目模板也天然支持断点调试, 你可以在代码中设置断点, 则 F5 运行时程序会自动在断点处暂停并显示运行情况.

最终编写流程#

我们现在有了实时修改和 AI 直接看酒馆页面的功能, 则编写流程应该如下:

创建项目#

在 src 文件夹中用初始模板新建项目.

在酒馆正则中导入初始模板中的实时修改正则 (编写脚本则在酒馆助手 ‣ 脚本库中导入实时修改脚本), 并将其中的链接替换为打包结果链接.

进行编写#

  1. 点击 Cursor 右下角的 Go Live 将文件夹映射为网络链接

  2. 按 F5 运行调试任务, 并在酒馆页面按下 F12 打开开发者工具从而启用 BrowserTools MCP (可能需要重新安装 BrowserTools MCP 浏览器插件)

  3. 让 AI 在这个项目中编写代码、修改错误

发布打包结果#

在确认项目完成后, 关闭 F5 所打开的酒馆网页, 用 pnpm build 将项目打包成一个文件, 将打包结果用代码块包裹后复制到酒馆正则中 (如果是脚本则直接复制到酒馆助手脚本库中).

注意你应该发布 pnpm build 的打包结果, 而不是 pnpm watch 的打包结果. pnpm watch 打包结果的大小是 pnpm build 打包结果的数十倍.