资深前端
面向资深前端的完整工具包，整合现代工具与最佳实践。
快速开始
主要能力
该技能通过自动化脚本提供三大核心能力：
# 脚本 1：组件生成器
python scripts/component_generator.py [选项]
# 脚本 2：打包分析器
python scripts/bundle_analyzer.py [选项]
# 脚本 3：前端脚手架
python scripts/frontend_scaffolder.py [选项]
核心能力
1. 组件生成器
用于组件生成任务的自动化工具。
功能特性：
- 自动化脚手架
- 内置最佳实践
- 可配置模板
- 质量检查
用法：
python scripts/component_generator.py <项目路径> [选项]
2. 打包分析器
全面的分析与优化工具。
功能特性：
- 深度分析
- 性能指标
- 优化建议
- 自动化修复
用法：
python scripts/bundle_analyzer.py <目标路径> [--verbose]
3. 前端脚手架
用于专业任务的先进工具。
功能特性：
- 专家级自动化
- 自定义配置
- 即插即用
- 生产级输出
用法：
python scripts/frontend_scaffolder.py [参数] [选项]
参考文档
React 模式
完整指南请参见 references/react_patterns.md：
- 详细的模式与实践
- 代码示例
- 最佳实践
- 应避免的反模式
- 真实场景案例
Next.js 优化指南
完整工作流文档请参见 references/nextjs_optimization_guide.md：
- 分步流程
- 优化策略
- 工具集成
- 性能调优
- 故障排除指南
前端最佳实践
技术参考指南请参见 references/frontend_best_practices.md：
- 技术栈详情
- 配置示例
- 集成模式
- 安全考虑
- 可扩展性指南
技术栈
语言： TypeScript, JavaScript, Python, Go, Swift, Kotlin 前端： React, Next.js, React Native, Flutter 后端： Node.js, Express, GraphQL, REST APIs 数据库： PostgreSQL, Prisma, NeonDB, Supabase DevOps： Docker, Kubernetes, Terraform, GitHub Actions, CircleCI 云服务： AWS, GCP, Azure
开发工作流
1. 设置与配置
# 安装依赖
npm install
# 或者
pip install -r requirements.txt
# 配置环境变量
cp .env.example .env
2. 运行质量检查
# 使用分析脚本
python scripts/bundle_analyzer.py .
# 查看建议
# 应用修复
3. 实施最佳实践
遵循以下文档中的模式与实践：
references/react_patterns.mdreferences/nextjs_optimization_guide.mdreferences/frontend_best_practices.md
最佳实践总结
代码质量
- 遵循既定模式
- 编写全面测试
- 记录决策
- 定期审查
性能
- 在优化前进行测量
- 使用适当的缓存
- 优化关键路径
- 在生产环境监控
安全
- 验证所有输入
- 使用参数化查询
- 实施恰当的认证
- 保持依赖更新
可维护性
- 编写清晰的代码
- 使用一致的命名
- 添加有用的注释
- 保持简洁
常用命令
# 开发
npm run dev
npm run build
npm run test
npm run lint
# 分析
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze
# 部署
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/
故障排除
常见问题
查看 references/frontend_best_practices.md 中的完整故障排除章节。
获取帮助
- 查看参考文档
- 检查脚本输出信息
- 查阅技术栈文档
- 查看错误日志
资源
- 模式参考：
references/react_patterns.md - 工作流指南：
references/nextjs_optimization_guide.md - 技术指南：
references/frontend_best_practices.md - 工具脚本：
scripts/目录