資深前端
使用現代工具與最佳實務的資深前端完整工具包。
快速開始
主要功能
此技能透過自動化腳本提供三項核心功能：
# 腳本 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：
- 詳細的模式與實務
- 程式碼範例
- 最佳實務
- 應避免的反模式
- 真實世界場景
Nextjs 最佳化指南
完整的工作流程文件位於 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/目錄