web

Web

用途

此技能负责核心 Web 开发任务，包括设置项目结构、选择合适的工具（例如，用于前端的 React、用于后端的 Express），以及制定部署决策（例如，选择 AWS 或 Heroku）。它可确保项目遵循可扩展且易于维护的最佳实践。

适用场景

在启动新的 Web 项目、重构现有项目或决定技术栈时使用此技能。例如，可将其用于需要前后端集成的全栈应用，或在部署到云服务时使用。移动应用或数据科学等专业领域则不适用。

主要功能

• 生成项目结构：创建 /src 等代码目录、/public 等资源目录，以及配置文件（例如 Node.js 的 package.json）。
• 工具选择：根据需求提供建议，例如推荐使用 Webpack 打包或使用 Babel 转译。
• 部署决策：评估 Docker 容器或无服务器方案（AWS Lambda）等选项，并考虑成本和可扩展性等因素。
• 与版本控制集成：自动为 Web 项目设置 .gitignore。

使用模式

通过发送 POST 请求到 /skills/web 并附上 JSON 负载来调用 OpenClaw 的此技能，例如：{"action": "setup", "params": {"type": "full-stack"}}。在代码中，可在脚本中使用此技能模块并调用 skill.web.setupProject(options) 等方法。对于经过身份验证的操作，务必传入所需的环境变量，例如 $WEB_API_KEY。使用命令行时，运行 openclaw web --action setup --params '{"framework": "react"}' 来初始化项目。

常用命令/API

• API 端点：POST /skills/web/setup——需要类似 {"projectName": "myapp", "structure": {"frontend": "react", "backend": "express"}} 的 JSON 请求体。添加身份验证标头：Authorization: Bearer $WEB_API_KEY。
• CLI 命令：openclaw web generate --type full-stack --tools webpack,babel——标志：--type（例如，"spa" 表示单页应用）、--tools（逗号分隔的列表）。
• 代码片段：

  import openclaw
  response = openclaw.invoke('web', {'action': 'selectTool', 'criteria': 'fast-rendering'})
  print(response['recommendation'])  # Outputs e.g., "React"
  

• 配置格式：使用 YAML 编写项目配置，例如：

  project:
    frontend: react
    backend: node
    deployment: docker
  

集成说明

通过串联调用与其他 OpenClaw 技能集成，例如，在完成 Web 设置后调用 "deploy" 技能。设置 $WEB_API_KEY 等环境变量以访问 API。对于外部工具，可通过管道传递输出：在设置完成后通过子进程调用运行 npm install。通过检查版本确保兼容性，例如，现代 Web 项目使用 Node.js 14+。如果与 CI/CD 一起使用，可将配置导出为 JSON，供 GitHub Actions 等工具使用。

错误处理

检查响应状态码：如果 API 返回 400，则记录错误消息（例如，"Invalid project type"），并使用更正后的参数重试。对于 CLI，使用 try-catch 处理失败：例如，在 Python 中使用 try: subprocess.run(['openclaw', 'web', 'setup']) except subprocess.CalledProcessError as e: print(e.output)。常见错误包括缺少 $WEB_API_KEY（可在 .env 文件中设置以解决）或标志无效（例如，--tools 使用了不受支持的值）。调用前务必验证输入，例如，确保 "framework" 的值为 ["react", "vue"] 中的一个。

具体使用示例

1. 设置基本 Web 项目： 使用此技能创建 React-Node.js 应用。命令：openclaw web setup --name myapp --frontend react --backend express。此命令会生成包含 /src/client（用于 React 代码）和 /src/server（用于 Express 路由）的结构。然后在项目目录中运行 npm install。
2. 制定部署决策： 对于生产应用，通过 API 调用：POST /skills/web/deploy，请求体为 {"app": "myapp", "provider": "aws", "type": "ec2"}。此技能会推荐基于 Docker 的设置，并输出类似 Dockerfile: FROM node:14; COPY . /app; 的配置。可使用此配置自动生成部署脚本。

图关系

• 与集群相关：web-dev（例如，与“frontend”和“backend”等技能共享节点）。
• 通过标签连接：“web”（链接到开发集群中的技能）、“development”（连接到“git”或“docker”等工具）。
• 依赖项：API 调用需要“auth”，并与“deployment”技能集成，以便执行设置后的操作。