React

一、前置准备：环境搭建与依赖确认 在开始优化 Lottie 动效前，必须确保开发环境干净、工具链统一、AI 辅助能力就绪——这直接决定后续重构效率与代码质量。我们不追求“能跑就行”，而是为可维护、可压测、可回滚的动效系统打下基础。 首先检查 Node.js 版本（Lottie Web v2.12+ 及现代 React/Vue 生态强烈依赖 ES2022+ 特性）： node -v # 必须 ≥ v18.0.0（推荐 v20.11+） npm -v # npm ≥ 9.6，或使用 pnpm ≥ 8.15（更稳定） 接着安装核心依赖。根据技术栈选择其一（不建议混用）： ✅ React 项目：优先选用 lottie-react（轻量、TypeScript 原生支持、自动销毁） npm install lottie-react # 或按需引入 lottie-web（更灵活但需手动管理生命周期） npm install lottie-web ✅ Vue 3 / 原生 Web：直接使用 lottie-web ✅ 轻量替代方案（静态/简单交互动效）：@lottiefiles/lottie-player（Web Component，零 JS bundle 开销） npm install @lottiefiles/lottie-player 图：lottie-web、lottie-react、lottie-player 适用场景对比（体积/控制粒度/SSR 支持） Claude Code 配置是本教程的关键加速器。我们强烈推荐使用 VS Code 官方扩展 “Claude Code”（v1.4+），并完成以下配置： ...

一、为什么“试用很爽，上线就崩”？——我的三次翻车现场实录 2024.03.12 上午10:23 —— CI流水线突然卡死在 claude-plugin:run 步骤。本地 npx claude-gen --component Header 三秒出结果，CI里却卡住 90 秒后被 Kubernetes OOMKilled。日志最后一行是： [claude-plugin] timeout after 60s waiting for Claude API response (retry=3) 没人想到，我们给插件配的 CLAUDE_TIMEOUT=60 是硬编码进 Dockerfile 的，而 CI 环境 DNS 解析慢了 200ms，叠加重试逻辑直接超时。更讽刺的是，本地 .env 里写了 CLAUDE_TIMEOUT=120，但插件根本没读——它只认环境变量，不读文件。 2024.04.05 下午16:47 —— 生产监控告警：useEffect dependency warning 爆发式增长。React DevTools 里一切正常，但 Sentry 报出上千条： Warning: React has detected a change in the order of Hooks called by MyDataGrid. This will lead to bugs and errors if not fixed. at MyDataGrid (src/components/MyDataGrid.tsx:42:3) at useEffect (react.development.js:2439) 翻代码才发现：Claude生成的组件里，useEffect(() => { loadData(); }, [searchTerm]) 被写成了 useEffect(() => { loadData(); }, []) —— 因为 prompt 里我只写了“加个搜索功能”，没明确说“依赖项必须包含 searchTerm”。开发时 searchTerm 恰好是全局常量，所以没报错；生产环境它是从 URL 参数动态解析的，一变就崩。 ...