# 配置
## 入门指南
访问 [workers.cloudflare.com/playground](https://workers.cloudflare.com/playground)
- **无需账户**即可测试
- **无需 CLI 或本地环境**
- 代码在真实的 Cloudflare Workers 运行时中执行
- 可通过 URL 分享代码(永久有效)
## Playground 限制
⚠️ **重要限制**
| 限制 | Playground | 生产环境 Workers |
|------------|------------|-------------------|
| **模块格式** | 仅限 ES 模块 | ES 模块或 Service Worker |
| **TypeScript** | 不支持 (仅限 JS) | 通过构建步骤支持 |
| **绑定 (Bindings)** | 不可用 | KV, D1, R2, Durable Objects 等 |
| **wrangler.toml** | 不使用 | 配置必需 |
| **环境变量** | 不可用 | 完全支持 |
| **密钥 (Secrets)** | 不可用 | 完全支持 |
| **自定义域名** | 不可用 | 完全支持 |
**Playground 仅用于快速原型设计。** 对于生产环境应用,请使用 `wrangler` CLI。
## 代码编辑器
### 语法要求
必须导出包含 `fetch` 处理程序的默认对象:
javascript
export default {
async fetch(request, env, ctx) {
return new Response('Hello World');
}
};
**关键点:**
- 必须使用 ES 模块 (`export default`)
- `fetch` 方法接收 `(request, env, ctx)`
- 必须返回 `Response` 对象
- 不支持 TypeScript(请使用纯 JavaScript)
### 多模块代码
从外部 URL 或内联模块导入:
javascript
// 从 CDN 导入
import { Hono } from 'https://esm.sh/hono@3';
// 或粘贴库代码并进行相对导入
// (参考 patterns.md 获取多模块示例)
export default {
async fetch(request) {
const app = new Hono();
app.get('/', (c) => c.text('Hello'));
return app.fetch(request);
}
};
## 预览面板
### 浏览器标签页
带有地址栏的默认交互式预览:
- 输入自定义 URL 路径
- 代码更改时自动重载
- 可使用开发者工具 (右键 → 检查)
### HTTP 测试面板
切换到 **HTTP** 标签页进行原始 HTTP 测试:
- 更改 HTTP 方法 (GET, POST, PUT, DELETE, PATCH 等)
- 添加/编辑请求头
- 修改请求体 (JSON, 表单数据, 文本)
- 查看响应头和响应体
- 测试不同的内容类型
HTTP 测试示例:
Method: POST
URL: /api/users
Headers:
Content-Type: application/json
Authorization: Bearer token123
Body:
{
"name": "Alice",
"email": "
[email protected]"
}
## 分享代码
**复制链接**按钮可生成可分享的 URL:
- 代码嵌入在 URL 片段中
- Li