1. 九个物理模拟器合并成单文件我踩过的坑比物理题还多用 Claude Code 给初中生做九个物理模拟器单个跑都没问题但用户要的是一个文件双击即用。把九份 HTML 拼一起一试就崩九套 CSS 变量同名、九个 requestAnimationFrame 循环互相覆盖、CPU 直接飙满。最后用script typetext/html模板标签加 iframe srcdoc 注入才解决。这篇把 Claude Code 接入 TaoToken 的 settings.json 骨架、九个模拟器合并成单文件的完整配置、以及合并后本地打开验证九个模拟器均可运行的检查动作全部拆开讲清楚。适合正在用 Claude Code 做批量前端生成、又卡在单文件分发环节的人。九个模拟器分别是抛体运动、匀变速直线、弹簧振子、单摆、波的叠加、共振、行星轨道、动量碰撞、双缝干涉。每个都是独立 HTML自带 Canvas 画图、滑块调参、requestAnimationFrame 动画循环和物理积分。合并的核心矛盾就一个怎么让九个独立文档在一个文件里各跑各的、互不污染、还只跑当前那一个。2. TaoToken 前置Claude Code 接入的 settings.json 骨架Claude Code 默认走官方端点批量生成九个模拟器这种长任务token 消耗不小。我把它接到 TaoToken 上统一管理 Key配置集中在 settings.json 里改一处全局生效。TaoToken 的 API 地址是https://taotoken.net/api官网在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。Claude Code 走的是 Anthropic 兼容协议所以 base_url 要指向对应的 Anthropic 端点不是 OpenAI 那套。settings.json 骨架长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的统一Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(chrome:*), Bash(node:*) ] } }几个关键点。ANTHROPIC_BASE_URL填 TaoToken 的 API 地址不要带 UTM 参数那是给网页链接用的。ANTHROPIC_AUTH_TOKEN就是你在控制台生成的 Key九个模拟器的生成任务共用这一个不用每个项目单独配。ANTHROPIC_SMALL_FAST_MODEL用来跑一些轻量判断比如读文件、改小 bug省 token。注意settings.json 放在项目根目录的.claude/下或者用户级的~/.claude/settings.json。项目级优先适合九个模拟器这种独立工程。Key 的生成入口在控制台的 API Keys 页面生成后复制一次就存好页面不再显示完整值。接入文档里有各语言 SDK 的调用示例Claude Code 这种走环境变量的场景看文档里的环境变量配置那节就够。3. 可复制配置九个模拟器合并成单文件的完整方案3.1 目录结构与构建脚本九个源文件放在simulators/下每个是完整 HTML。构建脚本只做三件事读取、塞进模板、拼接。project/ ├── simulators/ │ ├── projectile.html │ ├── kinematics.html │ ├── spring.html │ ├── pendulum.html │ ├── wave.html │ ├── resonance.html │ ├── orbit.html │ ├── collision.html │ └── double-slit.html ├── build.js └── 物理模拟器.html ← 构建产物build.js 的核心逻辑const fs require(fs); const path require(path); const sims [ { id: projectile, name: 抛体运动, file: projectile.html }, { id: kinematics, name: 匀变速直线, file: kinematics.html }, { id: spring, name: 弹簧振子, file: spring.html }, { id: pendulum, name: 单摆, file: pendulum.html }, { id: wave, name: 波的叠加, file: wave.html }, { id: resonance, name: 共振, file: resonance.html }, { id: orbit, name: 行星轨道, file: orbit.html }, { id: collision, name: 动量碰撞, file: collision.html }, { id: double-slit, name: 双缝干涉, file: double-slit.html } ]; let templates ; for (const s of sims) { let html fs.readFileSync(path.join(simulators, s.file), utf8); // 关键把 /script 替换成占位符防止提前关闭外层 script html html.replace(/\/script/g, __SCR_END__); templates script typetext/html idtpl-${s.id}${html}/script\n; } const shell fs.readFileSync(shell.html, utf8); const output shell.replace(!-- TEMPLATES --, templates); fs.writeFileSync(物理模拟器.html, output); console.log(构建完成大小, (output.length / 1024).toFixed(1), KB);3.2 外壳页面的注入逻辑外壳页面负责渲染九个卡片点击时把对应模板内容注入 iframe 的 srcdocfunction openSim(id) { const tpl document.getElementById(tpl- id); if (!tpl) return; // 还原被替换的结束标签 const html tpl.textContent.replace(/__SCR_END__/g, \/script); const frame document.getElementById(stage); frame.srcdoc html; document.getElementById(home).style.display none; frame.style.display block; } function goHome() { const frame document.getElementById(stage); frame.srcdoc ; // 清空停掉动画循环 frame.style.display none; document.getElementById(home).style.display block; }这里\/script里的反斜杠不是为了 JS 转义JS 里\/就是/而是为了骗过 HTML 解析器。HTML 解析器扫到script块后会一路找字面的/script来结束它不管这个字符串是在正则里、字符串里还是注释里。写成\/script后解析器扫到\/不认为是结束标签继续往后JS 运行时\/script和/script完全等价。3.3 为什么不用其他方案把九个模拟器的 JS 全塞进一个全局作用域、靠命名空间隔开九套代码挤一起一个变量名撞了全崩。Shadow DOM 能隔 CSS但 JS 的 requestAnimationFrame 还是共享一个事件循环九个动画一起跑的问题没解决。每个模拟器单独一个 HTML 文件、用链接跳转那就不叫一个文件了分发还是九个文件。iframe srcdoc 是唯一同时解决隔离、省电、源文件不改、单文件分发四件事的方案。代价是 iframe 内外跨域通信麻烦但这个项目里子页面不需要和外壳通信各跑各的代价为零。4. 验证请求合并后本地打开检查九个模拟器均可运行构建完不能只看文件大小得实际验证九个模拟器都能跑起来。我用 Chrome 无头模式做自动化检查。4.1 无头模式 dump DOMchrome --headlessnew --dump-dom --virtual-time-budget2000 物理模拟器.html--virtual-time-budget2000让虚拟时间推进 2 秒动画跑几帧再 dump。如果首页卡片按钮上没绑 click 事件说明主 script 块提前关闭了后面的代码全没解析。4.2 逐个模拟器自探测file:// 协议下iframe 的 contentDocument 是跨域的外部脚本读不到 iframe 里的内容。所以验证模拟器有没有真的跑起来不能从外面读 iframe得在页面里自己探测往 iframe 里塞一段自报状态的代码让它把结果写回父页面。function verifySim(id) { return new Promise((resolve) { const tpl document.getElementById(tpl- id); const html tpl.textContent.replace(/__SCR_END__/g, \/script); // 注入自报状态代码 const probe html.replace(/body, scriptparent.postMessage({sim: id ,ok:true},*)\/script/body); const frame document.getElementById(stage); frame.srcdoc probe; const handler (e) { if (e.data e.data.sim id) { window.removeEventListener(message, handler); resolve(e.data.ok); } }; window.addEventListener(message, handler); setTimeout(() resolve(false), 3000); }); } async function verifyAll() { const ids [projectile,kinematics,spring,pendulum,wave, resonance,orbit,collision,double-slit]; for (const id of ids) { const ok await verifySim(id); console.log(id, ok ? PASS : FAIL); } }4.3 成功结果九个模拟器全部 PASS控制台输出projectile PASS kinematics PASS spring PASS pendulum PASS wave PASS resonance PASS orbit PASS collision PASS double-slit PASS成品物理模拟器.html约 192 KB单文件双击即用离线手机自适应。还能用 URL 记忆物理模拟器.html#pendulum直接跳到单摆刷新也留在原地。5. 本篇常见错排查5.1 点卡片没反应控制台无报错这是最典型的坑。根因是主script块提前关闭了。检查构建脚本里有没有把/script替换成占位符。如果模板内容里有字面的/script每个模拟器自己有 script 标签直接放进去会提前结束外层 script。修法构建时html.replace(/\/script/g, __SCR_END__)注入时tpl.textContent.replace(/__SCR_END__/g, \/script)。注意还原那行 JS 里的\/script必须带反斜杠否则又踩同一个坑。5.2 九个模拟器同时跑CPU 飙满说明 iframe 没有正确清空。返回首页时要frame.srcdoc 这会停掉 iframe 里的动画循环。如果只是display:none动画还在后台跑。5.3 手机上显示模糊Canvas 没处理 devicePixelRatio。每个模拟器里要用 ResizeObserver 盯容器大小按devicePixelRatio设置 canvas 的 width/height 属性再用 CSS 缩回逻辑尺寸。const dpr window.devicePixelRatio || 1; canvas.width rect.width * dpr; canvas.height rect.height * dpr; canvas.style.width rect.width px; canvas.style.height rect.height px; ctx.scale(dpr, dpr);5.4 弹簧振子振幅越来越大显式欧拉法积分弹簧会越积越发散能量不守恒。换成 RK4 加子步长每帧切 8 小步能量曲线才平。公式是m·x -k·x - b·x周期靠过零点实测去对T 2π√(m/k)。5.5 单摆大角度周期对不上公式小角公式T 2π√(L/g)只在小角度准。摆角拉到 60° 时实测周期会比小角公式长一点要加修正T ≈ T₀(1 θ₀²/16)。这个偏差本身就是教学点告诉孩子公式有适用范围。5.6 Claude Code 报 401 或连接失败检查 settings.json 里ANTHROPIC_BASE_URL是不是https://taotoken.net/api不要带 UTM 参数。ANTHROPIC_AUTH_TOKEN是不是控制台生成的完整 Key。如果还不行去接入文档对照环境变量名Claude Code 用的是ANTHROPIC_前缀那套不是OPENAI_。6. 把九个模拟器跑通之后下一步怎么走九个模拟器合并成单文件这件事核心就三步每个子页面塞进script typetext/html模板、点击时用 iframe srcdoc 注入、/script用占位符加转义处理。这套流程能复制到任何多个独立页面 → 单个文件分发的需求教学课件把十个实验塞一个文件、产品 Demo 把几个界面打包发客户、离线工具集不依赖服务器。如果你也在用 Claude Code 做批量前端生成建议先把 TaoToken 的 Key 配好统一管理省得每个项目单独折腾。Key 在控制台的 API Keys 页面生成接入细节看接入文档。验证模型连通性可以用模型对话页面直接发一条测试请求确认端点通再跑批量任务。长期做编码和 Agent 类任务的话Coding Plan 的额度模型更适合这种持续消耗的场景。物理直觉是动手养出来的不是背出来的。AI 帮你把从公式到能动手调的模拟器这条路一次性跑通省下的是写前端、调动画、处理高分屏那些杂活留下的是真正该花时间的部分把物理讲清楚。