前端&AI技术双周刊-2026.06.22

前端技术

• Babel 8.0 发布，ESM-only、自带 TS 类型、默认不再编译到 ES5/CJS
  Babel 8.0 是一次减负重塑版本，主线是现代化。全面 ESM-only，require Babel 的工具链需要适配；内置 TypeScript 类型，不再依赖 @types/babel__*；默认目标不再编译到 ES5 与 CommonJS——IE11 早已 EOL，Node 18 LTS 也已 EOL，继续兜底已无意义。对工具链团队这是一个清理日版本，很多场景下用 SWC / esbuild / Rolldown 替换 Babel 已是更经济的选择；继续保留 Babel 的项目，则需要回归插件生态对 ESM-only 的兼容情况。

• React Compiler 的 Rust 移植版准备合入主线
  React 团队宣布 React Compiler 的 Rust 版即将合入主仓库，Meta 内部跑出显著效果。和现有 JS/OCaml 实现相比，构建期编译速度大幅提升，CI 与本地 dev server 重启延迟下降；与 Turbopack、Rspack、SWC 这类 Rust 工具链能在同一进程内复用 AST，省掉跨语言序列化开销；为未来在 Next.js / Expo 默认开启 React Compiler 铺平工程基础。一旦 Rust 版稳定，默认开启几乎是时间问题。

• Safari 27 beta + WASI 0.3，浏览器与 WebAssembly 同时关键升级
  WWDC 2026 期间 Safari 27 beta 发布，ESM loader 按标准重写，显著改进 top-level await 行为；WebAssembly 支持 JSPI（JavaScript Promise Integration），让 WASM 代码可以与 JS Promise 自然互操作。与此同时 WASI 0.3 正式发布，为 WebAssembly Components 带来原生 async 支持。两者叠加意味着把现有 async JS / Node 代码移植到 WASM 的工程成本显著下降，浏览器 + 服务端 + 边缘运行时正在朝同一套 WASM/异步模型收敛。是时候把 WASM 从专用场景重新评估为通用工具。

• Angular v22 正式发布，Signal Forms、Angular Aria 与异步响应式三大特性转正
  Google 发布 Angular v22，把此前一直处于实验/开发者预览的三个能力同时推到 stable。Signal Forms 取代基于 RxJS 的表单 API，整套表单状态走 signal，校验、脏检查、提交都更细粒度可控；Angular Aria 提供官方维护的无障碍原语集合，不再需要从第三方拼凑；异步响应式允许在 effect / computed 中直接 await，简化 signal 与 Promise 的协作。Router 还实验性接入了浏览器原生 Navigation API。对仍维护 Angular 的团队，这是一次老技术栈现代化的版本。

• Node.js 6 月安全发布，12 个 CVE 覆盖 22.x/24.x/26.x 全线
  Node.js 团队于 6 月 17 日发布全线安全更新，覆盖 22.23.0、24.17.0、26.3.1 三条发布线，共修复 12 个 CVE。其中两个 HIGH 级别漏洞需要重点关注，一个是 WebCrypto 在处理 2GiB 加密载荷时的崩溃问题；另一个是 TLS 通配符校验绕过，对多租户 SaaS 的身份校验链路构成实际风险。Node 20（Iron）已于 4 月 30 日 EOL，本次不再获得官方修复。所有运行 Node 后端 / 构建 / SSR 的服务，应排查并尽快升级；还在使用 Node 20 的项目需评估升级到 Node 24 LTS 的成本。

• Next.js 16.2.9
  Vercel 在 6 月 10 日发布 Next.js 16.2.9 补丁。Turbopack 进一步成熟，新增对 resource queries 加载器匹配的支持，构建/启动反馈信息更精确；Server Actions 日志能力增强，便于调试服务端调用；next/image 默认响应体上限从 300MB 收紧到 50MB，降低误用风险；新增 agents-md codemod，方便为 AI 编程代理生成项目说明文件；多个面向 React Server Components 的修复。如果团队已经在 Next.js 16 LTS 上，这一版本值得跟进，重点关注 Turbopack 行为变化和图像优化体积限制对现有页面的影响。

• ESLint v10.5.0 与 Prettier 3.8.4，报错定位与 Markdown 格式修复
  ESLint v10.5.0 改进了 max-nested-callbacks、no-with、max-lines-per-function、max-depth、max-statements 等规则的报错定位，把 violation 更准确地指向关键字或函数头，并修正 else-if 链在 max-depth 中的处理，使编辑器诊断和 CI 注释更友好。Prettier 3.8.4 修复了 Markdown/MDX 中列表项与嵌套子列表之间空行被错误移除的问题，对文档站点、组件库文档、Docusaurus/VitePress 项目影响明显。

• Tailwind CSS v4.3.1，CLI、Vite 插件与 v4 迁移器多项修复
  Tailwind CSS 发布 v4.3.1 patch，覆盖 CLI、Vite 插件、Webpack/Rspack 兼容性、class candidate 扫描以及 v4 迁移器的多个实用问题。这次更新对仍在评估 Tailwind v4 迁移的团队是积极信号，围绕新 oxide 引擎的工程化体验在持续打磨。建议正在使用 Tailwind v4 的项目跟进，注意 Vite/Rspack 项目升级后是否需要清理样式缓存。

• npm v11.17.0，min-release-age 排除规则与 in-bundle hardening
  npm 发布 v11.17.0，继续把安装脚本默认执行往可审计、可限制推进。@npmcli/config 新增 min-release-age-exclude 配置；libnpmexec 与 @npmcli/arborist 持续推进 allowScripts 工具链与 in-bundle hardening。结合此前 Shai-Hulud 蠕虫和 TanStack 包污染事件，这条路线值得重点关注。前端团队升级后建议重点检查 npm install、npm exec、私有 tarball、workspace link、package-lock 变更和内部脚手架对 npm 输出的解析。

AI 资讯

• Anthropic 6 月 15 日双重大限，Claude Sonnet 4 / Opus 4 退役 + Agent SDK 计费拆分
  Anthropic 在 6 月 15 日同时执行两项关键变更。Claude Sonnet 4、Opus 4 正式从 API 下线，迁移期结束，旧应用必须切到 Sonnet 4.5 或更高的 Fable / Mythos 系列；Agent SDK 计费规则正式拆分，工具调用、子 Agent 调度、长上下文 caching 各自独立按 token 计价，原本被打包计费的 Agent harness 成本被显式暴露。仍调用旧 Claude 4 系列的 SDK 和 LangChain/LiteLLM 配置在 6 月 15 日之后会直接失败，需要回归测试；用 Claude Agent SDK 跑长跑 Agent 的服务需重新评估单次任务成本。

• Anthropic 发布 Claude Fable 5 / Mythos 5，72 小时后被监管下线
  Anthropic 于 6 月 9 日同时发布 Claude Fable 5（公开版）与 Mythos 5（受限版），定位高于 Opus 4.8。但仅 72 小时后，由于第三方关于潜在越狱的报告，美国商务部要求其停止对外提供，使 Fable 5 成为史上最短命旗舰模型。这次事件提供了三点警示，闭源前沿模型受地缘与监管影响显著加大；多模型容灾（Claude / GPT / Gemini / 国产开源）已不是性能选择，而是稳定性必选项；长期看开源 SOTA 模型的战略价值持续上升。

• OpenAI 给 ChatGPT 加上定时任务，scheduled tasks 公测上线
  OpenAI 于 6 月 17 日开放 ChatGPT scheduled tasks 公测，Plus / Pro / Business / Enterprise 用户可让 ChatGPT 在指定时间或周期触发预设 Prompt，结果以站内消息或邮件投递。Tasks 与 Codex / Apps in ChatGPT / Connectors 互通，可在定时触发中调用 GitHub、Jira、Notion、内部 API 等连接器；单账号上限 10 个并发任务，结合 ChatGPT 团队工作区即可拼装出轻量 Cron + Webhook 工作流。这条更新让 ChatGPT 第一次具备了无服务器后台 Job 形态。

• OpenAI 给 Codex 加上 Record & Replay，失败回放与可审计 Agent
  OpenAI 在 6 月 17 至 18 日为 Codex 发布 Record & Replay 能力，把 Agent 的工具调用、文件改动、终端命令和模型推理链全部录制成可重放的 trace，可逐步前进/后退、修改某一步参数后重跑后续动作。trace 默认本地存储并可导出 JSON；失败任务可直接定位到出错工具调用，并以分支重放方式让 Agent 改写策略；Enterprise/Team 套餐还能把 trace 接入 SOC 2 审计流。这是 AI 编程从黑盒生成走向可审计协作的标志性更新。

• OpenAI Codex 桌面版开放完整 Chrome DevTools 权限，AI Agent 接管浏览器调试
  OpenAI Codex 桌面版更新支持启用完整 Chrome DevTools Protocol（CDP）访问权限，开启后 Codex 可控制页面打开/关闭、模拟点击与键盘输入、抓取 DOM、截图、监听网络请求、执行任意脚本。AI Coding Agent 不再只是在编辑器里改文件，而是直接进入运行时辅助定位问题。安全注意，完整 CDP 权限可读取 Cookie 等敏感数据，遭遇 prompt injection 或误调用存在数据泄露风险，该能力默认关闭，建议只在调试期短期开启、用完即关。

• 小米开源 MiMo-V2.5-Pro-UltraSpeed，1000+ tps 端到端 RL 推理模型
  小米 MiMo 团队 6 月开源 MiMo-V2.5-Pro-UltraSpeed，主打在保持推理质量的前提下把端到端速度做到极致。模型在 vLLM/TensorRT-LLM 实测吞吐超过 1000 tokens/s，结合自研投机解码与 RL 训练得到的短链推理策略，在 GSM8K、MATH、MMLU-Redux 等基准上仍保持与同尺寸 Qwen3、DeepSeek V3 同档次的成绩。可直接部署到单卡 H100 或 4090×2 推理。适合做对延迟敏感的端侧 / 边缘 AI 功能，也可作为低延迟 sub-agent 与 Claude / GPT / Gemini 等高质量模型组合使用。

• Cloudflare：机器人流量占比达 57.4%，已超越人类访问
  Cloudflare 公布全球 HTTP 请求构成，机器人 / 爬虫 / AI 智能体合计占 57.4%，人类访问降至 42.6%，原本预计 2027 年底才出现的流量逆转因 AI Agent 扩张提前发生。监控、A/B 实验、广告与转化漏斗里用户行为的基础假设需要重写，大量访问其实是 LLM 抓取与 Agent 任务回放；内容站点应尽快评估 robots.txt、ai.txt、付费抓取协议的落地节奏；反爬策略需要从挡住爬虫切到识别并区别计费/限流。

• Agent 消费闭环开始落地，微信支付 AI 专属卡 + 京东 A2P2 协议
  国内同周内出现两条互补的 Agent 支付动作。微信支付推出 AI 专属卡，资金与微信支付主账户隔离，每笔交易仍需用户在手机端确认；京东发布 A2P2，把智能体支付分为 L0 至 L5 六级，并提出 ARI（智能体运行时身份）机制，把谁授权、哪个 Agent、在哪里执行绑定到每笔交易。Agent 正从帮你查进入帮你办，下一步前端落地的不再只是聊天 UI，而是身份、授权、确认、回执、审计这一整套支付/交易交互链路。

• 小程序 Skill 化，微信、支付宝同步推动 AI 入口之争
  微信与支付宝几乎同时启动小程序 Skill 化，微信公开小程序接入 AI 的 Skill 技术规范，支付宝内测 AI 版支付宝。底层动机是抢在豆包等 AI 原生入口形成有事找 AI 用户习惯之前，把过去十年沉淀的小程序生态 AI 化。小程序的角色从用户主动点开的页面变成 AI 理解意图后调用的服务，需要把页面拆成可被外部调用的 capability + 数据契约；Skill 天然标准化、可组合、可跨端调用，与超级 App 守住入口的目标存在冲突。

扩展阅读

• zod-compiler，把 Zod schema 编译成零开销 validator
  构建时把现有 Zod schema 改写为优化后的、可 tree-shake 的校验函数，可作为 Vite / webpack 等的插件接入。号称比运行时 Zod 快 2 至 75 倍，源码无需改动，完整保留 Zod API。对接口校验链路在性能 profile 中能看到 Zod 的项目（典型如 BFF、Server Actions、Edge function），是几乎零成本的优化项。

• Iroh 1.0，自带 NAT 穿透的 P2P 加密网络栈，原生支持 Node.js bindings
  Iroh 1.0 是用 Rust 实现的 P2P 网络栈，支持 NAT/防火墙穿透、端到端加密，并提供官方 Node.js bindings。协作工具、白板、本地优先（local-first）应用可以直接在浏览器/Node 之间建立 P2P 通道，避免自建 TURN/relay；Bindings 已直接面向 Node，可在 Electron / Tauri / 桌面端复用；与 Yjs、Automerge 等 CRDT 库结合，可以做出无中心服务器的实时协作原型。

• Playwright 1.61，原生 passkeys 测试与 WebStorage API
  Playwright 1.61 加入两个工程上很实用的能力。原生 passkeys 注册与验证测试，无需再 mock WebAuthn；新的 WebStorage API 可以直接读写 localStorage 与 sessionStorage，预设登录状态、清理脏数据都不再依赖 evaluate hack。对接入 passkey / 多账号切换 / 持久化登录场景的项目，可以借此简化 fixture 与 setup 脚本。

• Frontman，住在前端框架与浏览器里的 AI Agent
  面向前端开发的 AI Agent 工具，与通用浏览器自动化工具的区别在于理解组件树、computed CSS、source map，把浏览器里的视觉结果直接对应回源码位置。适配 Next.js / Astro / Vite 等现代前端项目，适合做 UI 微调、样式问题排查、组件定位。和通用浏览器 Agent 互补，通用工具适合操作页面，Frontman 更像给 AI Agent 装上前端调试眼睛。

• performative-ui，面向 AI 应用的 React 组件库
  专为 AI 应用设计的 React 组件库，包含对话式界面、模型输出展示、Agent 状态可视化等常见场景所需的交互组件，包括 ASCII hero art、节点图背景等 AI 原生风格组件。适合快速搭建 Agent UI、对话工具、模型 demo。

• Claude Code Agent Teams，多 Agent 协作开发实战指南
  系统介绍如何把 Claude Code 从单 Agent 干活升级为多 Agent 协同开发，由 Team Lead 拆任务、多个 Teammates 并行执行，并通过共享 Task List 与 Mailbox 同步上下文。每个 Teammate 是独立 Claude Code 会话，拥有自己的上下文、工具与终端。实践上需提前划分文件/模块所有权（如 frontend 负责页面、backend 负责 API、tests 负责验证）避免冲突；成本上 Agent Teams 比普通 subagent 更耗 token，仅在确实需要 Agent 之间互相沟通时才用。对正在建设 AI Coding 工程化 SOP 的团队，是少见的实操级文章。

• LinkedIn 假招聘者的 Node 后门，一次真实供应链钓鱼复盘
  开发者 Roman Imankulov 复盘了一次接近上当的钓鱼经历，自称招聘者通过 LinkedIn 私信发来诊断 Node 项目的考题，git 仓库与招聘者本人都使用真实第三方身份伪装，但依赖里藏着远控后门，运行 npm install 即触发。结合同期 npm 即将默认禁用 install scripts 的趋势，对前端 / Node 团队的实际启示是，任何来历不明的考题/Demo 必须先在隔离环境里跑；提前在 CI / 本地启用 –ignore-scripts、min-release-age、私有 registry 镜像；把陌生仓库 = 高风险写进团队工程规范。

• Neon 用 AI + 一致性 harness 把 psql 重写成纯 TypeScript
  Postgres 平台 Neon 想在自家 Node CLI 里提供 psql 体验，又不想带上 C 二进制依赖，于是用 AI 辅助、配合一套强一致性 conformance harness 与安全审查，把 psql 完整重写成 TypeScript 实现。文章详细记录了如何拆分行为契约测试，确保新实现与官方 psql 输出逐字节对齐；怎么在 Prompt 里让模型生成可被 fuzz 的代码而非看起来对的代码；安全 review 中发现的几类 AI 高频陷阱（escape 处理、连接复用、TLS 校验）。对计划用 AI 做经典 C 工具到 JS/TS 重写的团队，是少有的可以直接对标的工程实录。

• 2026 年 6 月，AI 编程彻底告别补全时代，Agent 全权接管开发链路
  这篇综述把 6 月的几件关键事件（Anthropic Fable5/Mythos5 上线即下架、Codex Record & Replay、Shazeer 加盟 OpenAI）放在同一框架下解读，给出了产品形态层面的清晰对比。任务边界从写一个函数扩展到全链路开发与部署；交互模式从人写 Prompt、AI 出代码转为人定目标、AI 自主规划执行；评估标准从模型跑分转向工程治理（上下文、权限、审计、成本）；人类角色从码农转为架构师 + 监工。文中引用 JetBrains 2026 Q2 调研，全球初级开发岗位需求同比下降 40%；谷歌内部新增业务代码 AI 生成占比 75%。