coding-web

coding-web

用途

此技能使 OpenClaw 能够协助使用 JavaScript、TypeScript 和 Node.js 进行全栈 Web 开发，重点是为 Web 应用生成、调试和优化代码。

适用场景

构建或维护涉及前端（例如 React、Vue）和后端（例如 Node.js 服务）的 Web 项目时使用此技能，尤其适用于搭建应用脚手架、修复 JS/TS 代码中的错误或集成 API 等任务。在快速原型开发或将旧代码迁移到现代标准等迭代开发周期中使用。

主要功能

• 生成 Node.js 服务的样板代码：可用于创建包含路由的 Express 应用，例如输出一个 server.js 文件。
• 处理 TypeScript 转换：将 JS 转换为 TS，确保类型安全；例如，为现有函数添加接口。
• 优化前端代码：压缩并打包 JS/TS 资源；调用时可设置参数，以指定 React 等框架。
• 调试常见 Web 错误：识别并建议修复 Node.js 中的 CORS 问题或 React 组件中的状态管理问题等。
• 集成数据库：使用 async/await 模式生成 Node.js 中连接 MongoDB 或 SQL 的代码。
• 代码片段：对于一个简单的 React 组件，OpenClaw 可能会输出：import React from 'react'; const MyComponent = () => <div>Hello</div>; export default MyComponent;

使用模式

要调用此技能，请在终端命令前加上 openclaw coding-web，或通过 OpenClaw 的 API 集成。始终先指定子命令（例如 generate、debug），再指定 --language ts 或 --framework react 等选项。调用 API 时，向 /api/coding-web/execute 发送 POST 请求，并在 JSON 载荷中包含 { "action": "generate", "params": { "type": "component", "name": "UserForm" } }。设置用于身份验证的环境变量，例如在运行命令前导出 $OPENCLAW_API_KEY。通过管道传递输出以串联使用技能，例如将数据库技能的输出作为此处的输入。

常用命令/API

• CLI 命令：openclaw coding-web generate --type server --framework express --port 3000 – 创建基本的 Express 服务；添加 --language ts 可使用 TypeScript。
• CLI 命令：openclaw coding-web debug --file app.js --issue "undefined variable" – 分析并修补指定文件中的错误。
• API 端点：向 /api/coding-web/generate 发送 POST 请求，请求体为 { "codeType": "component", "language": "ts", "details": { "name": "Login", "props": ["username"] } } – 以 JSON 格式返回生成的代码。
• 配置格式：使用 JSON 配置文件，例如 { "defaultLanguage": "ts", "framework": "react", "apiKey": "$OPENCLAW_API_KEY" }，并将其放在 .openclaw/config.json 中。
• 代码片段：处理 API 响应时：const response = await fetch('/api/coding-web/generate', { method: 'POST', body: JSON.stringify({ action: 'generate' }) }); const code = await response.json();
• 身份验证：API 调用的请求头中始终包含 $OPENCLAW_API_KEY，例如：headers: { 'Authorization': Bearer ${process.env.OPENCLAW_API_KEY} }。

集成说明

将此技能添加到扩展中，或使用 OpenClaw 的插件系统，即可将其与 VS Code 等 IDE 集成；通过 npm install openclaw-vscode 安装。对于 CI/CD，可将其嵌入 GitHub Actions 等脚本中：run: openclaw coding-web generate --type test --file src/app.js。通过在 package.json 中指定 Node.js 版本来处理依赖项，例如 "engines": { "node": ">=14" }。如果与其他工具配合使用，请将生成的代码导出为模块：module.exports = generatedCode;。确保环境中已安装 Node.js；调用前使用 node -v 检查。

错误处理

发生错误时，请检查 CLI 命令的退出代码（例如，失败时返回代码 1），并解析 API 返回的 JSON 错误响应，其中包含 { "error": "Invalid params", "details": "Missing --type flag" } 之类的字段。对于常见问题，请使用更正后的输入重试，例如，如果生成因缺少依赖项而失败，请先运行 npm install express。在代码片段中使用 try-catch：try { await openclawAPI.call('coding-web', { action: 'generate' }); } catch (e) { console.error(e.message); // e.g., "API key required" }。如果身份验证失败（例如，状态码为 401），请确认 $OPENCLAW_API_KEY 已设置且未过期。

具体使用示例

1. 示例 1：生成 Node.js Express 服务器
   使用：openclaw coding-web generate --type server --framework express --language js
   这会创建一个基本的服务器文件：const express = require('express'); const app = express(); app.listen(3000, () => console.log('Server running'));
   然后，运行 node server.js，在 3000 端口启动服务器。

2. 示例 2：调试并修复 TypeScript React 组件
   使用：openclaw coding-web debug --file MyComponent.tsx --issue "Type error in props"
   它可能会输出一段修复后的代码：interface Props { name: string; } const MyComponent: React.FC<Props> = ({ name }) => <div>{name}</div>;
   将输出复制到项目中，并使用 tsc 重新构建。

图关系

• 相关工具：“coding-backend”（共享 Node.js 功能）
• 依赖项：“tools-node”（用于访问 Node.js 运行时）
• 关联工具：“web-frontend”（用于 React/Vue 等前端专属任务）
• 功能重叠：“fullstack-dev”（位于“coding”集群中，适用于更广泛的开发任务）