Taolin · [翻译] Hono 更新 2025年夏季

hono-recent-updates-2025-08.pdf 2577475

Hono 更新 2025年夏季

Yusuke Wada

2025-08-22 / Cloudflare Workers Tech Talks in Niigata #1\n

关于我

Yusuke Wada
Web 框架开发者
高级开发者倡导者 @Cloudflare
Bokete 联合创始人
Hono 创建者
https://github.com/yusukebe

介绍最近的 Hono 更新

从 v4.7.0（2025年2月）到 v4.9.0（2025年8月）引入的新功能精选
其他话题

v4.7.0 - 2025年2月

Proxy Helper
Standard Schema Validator

Proxy Helper

将 Hono 应用用作反向代理的场景
访问后端时使用 fetch，但是...
=1634x656

fetch 可能会出现问题

执行 fetch 时会添加 accept-encoding（例如：gzip）
从源服务器接收压缩内容
解压后的内容可能会返回给客户端
带有 content-encoding（例如：gzip）
客户端尝试解压未压缩的内容
错误

CodeBlock Loading...

Proxy Helper 解决方案

CodeBlock Loading...

Proxy Helper 功能

https://hono.dev/docs/helpers/proxy
访问源服务器时删除 accept-encoding 头
从源服务器响应中删除 content-encoding、content-length
删除其他不需要返回给客户端的头
- connection、keep-alive、proxy-authenticate、proxy-authorization...

Standard Schema Validator

https://github.com/honojs/middleware/tree/main/packages/standard-validator
支持 Standard Schema 的验证器库的 Hono 验证中间件
- ArkType
- Valibot
- Zod
- 等等

使用方法

定义各种验证器的模式：

CodeBlock Loading...

sValidator 可以接受任何验证器的模式（如果支持 StandardValidator）：

CodeBlock Loading...

v4.8.0

SSG Plugin system
MCP Middleware
UA Blocker Middleware

SSG Plugin system

现在可以为 SSG Helper 创建插件
https://hono.dev/docs/helpers/ssg

SSG Helper 回顾

Hono 应用：

CodeBlock Loading...

使用 toSSG：

CodeBlock Loading...

执行后会在 static（默认）目录创建静态文件。现在可以创建插件

CodeBlock Loading...

Essential plugins for Hono SSG

@hono/ssg-plugins-essential
包含常用插件集合
- Sitemap plugin
- robots.txt plugin
- RSS/Atom plugin

MCP Middleware

@hono/mcp
https://github.com/honojs/middleware/tree/main/packages/mcp
提供专门为 Hono 定制的 Transport
- 支持 Streamable HTTP（SSE 即将推出）
可以快速搭建无认证、无状态的远程 MCP 服务器

CodeBlock Loading...

UA Blocker Middleware

@hono/ua-blocker
https://github.com/honojs/middleware/tree/main/packages/ua-blocker
检查 UserAgent，如果匹配指定的则阻止（返回 403）
提供 ai.robots.txt 中的 AI 爬虫列表 - @hono/ua-blocker/ai-bots

CodeBlock Loading...

阻止 AI 机器人

CodeBlock Loading...

v4.9.0

parseResponse Utility

parseResponse Utility

从 Hono Client (hc) 的响应中获取类型化数据的实用函数

CodeBlock Loading...

常规方法

CodeBlock Loading...

使用 parseResponse 如果不是 OK，会抛出 DetailedError

CodeBlock Loading...

其他话题

cloudflare+vite template
vite-ssr-components
cf-typegen command

cloudflare+vite template

用于 Cloudflare 的 Vite 模板
开发服务器不是 Wrangler
使用 Vite 进行构建
=342x235

vite.config.ts

CodeBlock Loading...

vite-ssr-components

https://github.com/yusukebe/vite-ssr-components
为使用 Vite 启动的 SSR 应用提供便利的组件
支持 React 和 hono/jsx
组件：
- ViteClient
- Script
- Link
- ReactRefresh（仅 React）

cf-typegen command

npm run cf-typegen
添加到 cloudflare / cloudflare+vite 模板的命令
调用 wrangler types
基于 wrangler.json 中定义的 Bindings/变量生成类型文件（worker-configuration.d.ts）

可以通过 Cloudflare.Env 引用

总结

介绍了最近的 Hono 更新
v4.7.0（2025年2月）到 v4.9.0（2025年8月）引入的新功能
其他话题

hono-recent-updates-2025-08.pdf 2577475

Hono 更新 2025年夏季

Yusuke Wada

2025-08-22 / Cloudflare Workers Tech Talks in Niigata #1\n

关于我

Yusuke Wada
Web 框架开发者
高级开发者倡导者 @Cloudflare
Bokete 联合创始人
Hono 创建者
https://github.com/yusukebe

介绍最近的 Hono 更新

从 v4.7.0（2025年2月）到 v4.9.0（2025年8月）引入的新功能精选
其他话题

v4.7.0 - 2025年2月

Proxy Helper
Standard Schema Validator

Proxy Helper

将 Hono 应用用作反向代理的场景
访问后端时使用 fetch，但是...
=1634x656

fetch 可能会出现问题

执行 fetch 时会添加 accept-encoding（例如：gzip）
从源服务器接收压缩内容
解压后的内容可能会返回给客户端
带有 content-encoding（例如：gzip）
客户端尝试解压未压缩的内容
错误

import { Hono } from 'hono'

const app = new Hono()
app.get('/', () => fetch('https://example.com/'))

export default app

CodeBlock Loading...

Proxy Helper 解决方案

import { Hono } from 'hono'
import { proxy } from 'hono/proxy'

const app = new Hono()
app.get('/', () => proxy('https://example.com/'))

export default app

CodeBlock Loading...

Proxy Helper 功能

https://hono.dev/docs/helpers/proxy
访问源服务器时删除 accept-encoding 头
从源服务器响应中删除 content-encoding、content-length
删除其他不需要返回给客户端的头
- connection、keep-alive、proxy-authenticate、proxy-authorization...

Standard Schema Validator

https://github.com/honojs/middleware/tree/main/packages/standard-validator
支持 Standard Schema 的验证器库的 Hono 验证中间件
- ArkType
- Valibot
- Zod
- 等等

使用方法

定义各种验证器的模式：

import { type } from 'arktype'
import * as v from 'valibot'
import * as z from 'zod'

const arktypeSchema = type({
  name: 'string',
  age: 'number',
})

const valibotSchema = v.object({
  name: v.string(),
  age: v.number(),
})

const zodSchema = z.object({
  name: z.string(),
  age: z.number(),
})

CodeBlock Loading...

sValidator 可以接受任何验证器的模式（如果支持 StandardValidator）：

import { sValidator } from '@hono/standard-validator'

app.post(
  '/author',
  sValidator('json', arktypeSchema),
  (c) => {
    const data = c.req.valid('json')
    return c.json({
      message: `${data.name} is ${data.age}`,
    })
  }
)

CodeBlock Loading...

v4.8.0

SSG Plugin system
MCP Middleware
UA Blocker Middleware

SSG Plugin system

现在可以为 SSG Helper 创建插件
https://hono.dev/docs/helpers/ssg

SSG Helper 回顾

Hono 应用：

// index.tsx
import { Hono } from 'hono'

const app = new Hono()

app.get('/about', (c) => {
  return c.html(
    <html>
      <body>
        <h1>Hello!</h1>
      </body>
    </html>
  )
})

export default app

CodeBlock Loading...

使用 toSSG：

// build.ts
import app from './index'
import { toSSG } from 'hono/ssg'
import fs from 'fs/promises'

toSSG(app, fs)

CodeBlock Loading...

执行后会在 static（默认）目录创建静态文件。现在可以创建插件

import type { SSGPlugin } from 'hono/ssg'

const logFilesPlugin: SSGPlugin = {
  afterGenerateHook: (result) => {
    if (result.files) {
      result.files.forEach((file) => console.log(file))
    }
  },
}

// ...

toSSG(app, fs, {
  plugins: [logFilesPlugin],
})

CodeBlock Loading...

Essential plugins for Hono SSG

@hono/ssg-plugins-essential
包含常用插件集合
- Sitemap plugin
- robots.txt plugin
- RSS/Atom plugin

MCP Middleware

@hono/mcp
https://github.com/honojs/middleware/tree/main/packages/mcp
提供专门为 Hono 定制的 Transport
- 支持 Streamable HTTP（SSE 即将推出）
可以快速搭建无认证、无状态的远程 MCP 服务器

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { StreamableHTTPTransport } from '@hono/mcp'
import { Hono } from 'hono'

const app = new Hono()

// 您的 MCP 服务器实现
const mcpServer = new McpServer({
  name: 'my-mcp-server',
  version: '1.0.0',
})

app.all('/mcp', async (c) => {
  const transport = new StreamableHTTPTransport()
  await mcpServer.connect(transport)
  return transport.handleRequest(c)
})

export default app

CodeBlock Loading...

UA Blocker Middleware

@hono/ua-blocker
https://github.com/honojs/middleware/tree/main/packages/ua-blocker
检查 UserAgent，如果匹配指定的则阻止（返回 403）
提供 ai.robots.txt 中的 AI 爬虫列表 - @hono/ua-blocker/ai-bots

import { uaBlocker } from '@hono/ua-blocker'
import { Hono } from 'hono'

const app = new Hono()

app.use(
  '*',
  uaBlocker({
    blocklist: ['ForbiddenBot', 'Not You']
  })
)
app.get('/', (c) => c.text('Hello World'))

export default app

CodeBlock Loading...

阻止 AI 机器人

import { uaBlocker } from '@hono/ua-blocker'
import { aiBots } from '@hono/ua-blocker/ai-bots'
import { Hono } from 'hono'

const app = new Hono()

app.use(
  '*',
  uaBlocker({
    blocklist: aiBots,
  })
)
app.get('/', (c) => c.text('Hello World'))

export default app

CodeBlock Loading...

v4.9.0

parseResponse Utility

parseResponse Utility

从 Hono Client (hc) 的响应中获取类型化数据的实用函数

import { Hono } from 'hono'

const app = new Hono()

const routes = app.get('/api/hello', (c) => {
  return c.json({ message: 'hello' })
})

CodeBlock Loading...

常规方法

import { hc } from 'hono/client'

const client = hc<typeof routes>('http://example.com/')
const res = await client.api.hello.$get()

if (!res.ok) {
  // 错误处理
}

const data = await res.json()
console.log(data.message)

CodeBlock Loading...

使用 parseResponse 如果不是 OK，会抛出 DetailedError

import { hc, parseResponse } from 'hono/client'

const client = hc<typeof routes>('http://example.com/')
const data = await parseResponse(client.api.hello.$get())
console.log(data.message)

CodeBlock Loading...

其他话题

cloudflare+vite template
vite-ssr-components
cf-typegen command

cloudflare+vite template

用于 Cloudflare 的 Vite 模板
开发服务器不是 Wrangler
使用 Vite 进行构建
=342x235

vite.config.ts

import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from 'vite'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [cloudflare(), ssrPlugin()]
})

CodeBlock Loading...

vite-ssr-components

https://github.com/yusukebe/vite-ssr-components
为使用 Vite 启动的 SSR 应用提供便利的组件
支持 React 和 hono/jsx
组件：
- ViteClient
- Script
- Link
- ReactRefresh（仅 React）

cf-typegen command

npm run cf-typegen
添加到 cloudflare / cloudflare+vite 模板的命令
调用 wrangler types
基于 wrangler.json 中定义的 Bindings/变量生成类型文件（worker-configuration.d.ts）

可以通过 Cloudflare.Env 引用

总结

介绍了最近的 Hono 更新
v4.7.0（2025年2月）到 v4.9.0（2025年8月）引入的新功能
其他话题