SuperAPI AI 工具集

add-integration

前端与建站

查看项目

更新于 10-15 22:37

技能介绍

用途:在 Astro 项目中添加官方或社区集成,包括 UI 框架(React、Vue、Svelte、Preact、Solid)、样式工具(Tailwind、UnoCSS、Sass)、部署适配器(Netlify、Vercel、Cloudflare、Node)、内容工具(MDX、Markdoc、CMS)与实用插件(sitemap、Partytown、分析、数据库辅助)。若可用,应同时应用 astro-best-practices。

主要能力与流程:先对集成分类,判断是否影响渲染模式、水合、配置结构或构建输出;官方集成优先用 astro add,例如 npx astro add react、npx astro add tailwind、npx astro add netlify;社区集成用项目包管理器安装并手动接入 astro.config.*。配置时显式添加集成、保持数组可读,仅在适配器或运行时需要时设置 output,避免无请求时工作却启用 server 输出,并保留既有配置顺序。

框架组件使用:静态内容优先用 .astro,框架组件仅用于交互岛屿,选择最轻客户端指令:client:visible 用于首屏外或延迟 UI,client:idle 用于非关键增强,client:load 仅用于立即交互,client:only 仅在有意跳过服务端渲染时使用。

收尾与验证:检查样式导入或入口、环境变量、tailwind.config.* 等配置文件、适配器输出要求与平台部署设置;Tailwind v4 最小设置常为 @import "tailwindcss"; 并从共享布局或入口导入。完成后确认集成已注册,运行 astro check、astro build 或现有测试,确认部署/运行时仍满足适配器要求,检查水合不匹配、样式缺失或适配器漂移。若同时升级 Astro,应一起升级官方集成;Astro 6 需确认 Node 22.12.0 或更新。

常见失败:包已安装但未加入 integrations;添加适配器却未匹配 output;样式存在但未导入;本可用普通 .astro 却引入框架组件;过度使用 client:load 增加 JavaScript 成本。