Web 开发 Skill

在 Termux Android 环境下进行 Web 全栈开发的最佳实践和工具选择。

⚠️ Termux Android 平台限制

推荐技术栈 (Termux 可用)

前端

npm install @sveltejs/kit svelte     # ✅ SvelteKit (纯 JS, 无原生二进制)
npm install solid-js                  # ✅ SolidJS (无原生依赖)
npm install preact                    # ✅ Preact (轻量 React 替代)
npm install htmx                      # ✅ HTMX (后端渲染 + HTML 增强)

避免: Next.js (依赖 esbuild)、Vite (某些插件调用 esbuild)

后端

npm install hono                      # ✅ 轻量 Web 框架 (首选)
npm install express                   # ✅ Express (可用但较重)
npm install fastify                   # ✅ Fastify (可用)

推荐脚手架

Hono + 纯 TS (SFC/SSR)

npm create hono@latest my-app
# 选 template: nodejs
cd my-app
npm install
npm run dev

SvelteKit + Vite (Vite 本体可用，但不能用 esbuild 插件的功能)

npm create svelte@latest my-app
cd my-app
npm install --ignore-scripts
npm run dev

项目结构规范

project/
├── src/
│   ├── routes/         # Hono routes / SvelteKit routes
│   ├── components/     # UI 组件
│   ├── lib/            # 工具函数
│   ├── types/          # TypeScript 类型定义
│   └── styles/         # CSS/样式
├── static/             # 静态资源
├── tests/              # 测试
├── .github/workflows/  # CI/CD 配置（重要：建项目时自动创建）
├── tsconfig.json       # strict: true
└── package.json

关键开发步骤

1. 初始化项目

mkdir my-project && cd my-project
npm init -y
# 先配 tsconfig.json（noUnusedLocals: true, strict: true）
# 再装依赖

2. 本地开发

# 不使用 Vite 时用 tsx + node
npx tsx src/index.ts

3. 构建与部署

# 构建输出纯 JS
npx tsc
node dist/index.js

4. CI 配置 (自动创建 .github/workflows/ci.yml)

必须包含：

• npm ci (干净的依赖安装)
• npx tsc --noEmit (类型检查)
• node --test tests/*.test.ts (测试)
• 构建

注意事项

• 📐 项目开始时自动生成 CI 配置 — 防止 push 到 GitHub 才暴露问题
• ⚠️ 不要在项目里用 .env 存密钥，用 env 变量
• 📏 TypeScript 必须 strict: true，禁止 any
• 🔄 用 node:assert 或 vitest（如果原生二进制可用）做测试
• 🐳 如需容器化，项目结构应适配 Dockerfile 多阶段构建
• 💡 定期用 npx tsc --noEmit 检查类型