Mokup：面向构建工具的可视化模拟工具，支持 Vite、Webpack、Node.js 和 Workers
Source: Dev.to
要进行翻译，我需要您提供要翻译的具体文本内容（除代码块和 URL 之外）。请粘贴文章的正文，我会按照要求保留原始格式并将其翻译成简体中文。
什么是 Mokup
Mokup 是一个 基于文件的 HTTP Mock 工具。
你把 mock 文件放在 mock/ 目录下，Mokup 会自动扫描这些文件，构建匹配的路由，并返回相应的响应。
它的目标很直接：帮助 mock 在你现有的前端项目中快速运行，降低为 API 协作单独构建服务的成本。
Key features
- Build‑tool friendly – 支持 Vite 和 Webpack，无需重写项目。
- Visual debugging – 内置 Playground 可一目了然查看路由状态。
- Great developer experience – mock 文件和配置更新会自动刷新，无需频繁重启。
- Deployable to multiple environments – 可部署到本地开发、Node.js 服务器、Workers 和 Service Workers。
为什么我构建它
对于许多团队来说，痛点 不在于 编写 mock，而是周边的工作流：
- 每当构建工具更改时，需要进行大量的设置步骤和重新配置。
- 本地调试时可视性差——人们只能通过阅读文件来猜测。
- 反馈循环慢，每次 mock 更改都需要重启或手动验证。
Mokup 解决了这三个问题：更轻量的设置、更强的可视化以及更快的反馈。
构建工具友好
Vite 集成
// vite.config.ts
import mokup from 'mokup/vite'
export default {
plugins: [
mokup({
entries: { dir: 'mock', prefix: '/api' },
}),
],
}在 mock/ 目录下添加文件后，Mokup 会自动扫描并生成路由。
您还可以从 CLI 输出中打开 Mokup Playground 进行可视化调试。
Webpack 集成
// webpack.config.js
const { mokupWebpack } = require('mokup/webpack')
const withMokup = mokupWebpack({
entries: { dir: 'mock', prefix: '/api' },
})
module.exports = withMokup({})这使您能够在现有的构建流水线中加入 mock 功能，而无需更改业务代码结构。
可视化：Playground
Mokup 包含一个内置的 Playground，用于检查已扫描的路由、方法、路径以及配置链。
Vite 开发环境中的默认入口：
http://localhost:5173/__mokup在线演示：
为什么重要 – 当某个端点无法工作时，你不需要到处
grep。打开 Playground 页面，即可立即看到该路由是否已被扫描、是否被禁用，以及匹配了哪个配置。
开发者体验：热重载支持
在 Vite 开发模式下，Mokup 会监听 mock 目录并自动刷新路由表。触发热重载的常见修改包括：
- 新增 / 修改 / 删除 路由文件，例如
mock/users.get.tsmock/messages.get.jsonmock/orders/[id].patch.ts
- 修改目录配置文件 –
mock/**/index.config.ts - 更改目录结构 – 移动、重命名或创建嵌套文件夹
更改后，Playground 会自动刷新路由列表，使调试速度大幅提升。
如果不需要文件监听，可在 entries 中设置 watch: false。
快速示例：从文件到响应
// mock/users.get.ts
import { defineHandler } from 'mokup'
export default defineHandler({
handler: c => c.json([{ id: 1, name: 'Ada' }]),
})启动开发服务器并访问 /api/users（假设 prefix: '/api'）。你将收到模拟数据。
快速集成 @faker-js/faker
Mokup 处理程序是普通的 TS/JS 函数，因此可以直接与 @faker-js/faker 集成，无需额外的适配层。
// mock/users.get.ts
import { faker } from '@faker-js/faker'
import { defineHandler } from 'mokup'
export default defineHandler(c => {
const size = Number(c.req.query('size')) || 5
const users = Array.from({ length: size }).map(() => ({
id: faker.datatype.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
}))
return c.json(users)
})现在，对 /api/users?size=10 的请求会返回一个包含 10 条随机生成用户的列表。
试用 Mokup!
- GitHub:
- 文档 / Playground:
祝你玩得开心！
const size = Number(c.req.query('size') ?? 10)
const count = Number.isNaN(size) ? 10 : Math.min(Math.max(size, 1), 50)
const list = Array.from({ length: count }, () => ({
id: faker.string.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
city: faker.location.city(),
createdAt: faker.date.recent({ days: 30 }).toISOString(),
}))
return c.json({
list,
total: 200,
page: 1,
pageSize: count,
})这对于列表、搜索和详情页的集成非常有用。
如果需要可复现的结果，请在处理函数顶部添加 faker.seed(123)。
可部署到多个环境
Node.js 开发模式示例
import { createFetchServer, serve } from 'mokup/server/node'
const app = await createFetchServer({ entries: { dir: 'mock' } })
serve({ fetch: app.fetch, port: 3000 })Cloudflare Worker 示例
import { createMokupWorker } from 'mokup/server/worker'
import mokupBundle from 'virtual:mokup-bundle'
export default createMokupWorker(mokupBundle)注意:
virtual:mokup-bundle仅在使用@cloudflare/vite-plugin的 Vite 中可用。
在 Node.js 开发模式下，直接使用createFetchServer；无需该虚拟模块。
核心架构
用例和边界
合适的情况
- 已有 Vite/webpack 项目且想要低成本模拟集成的团队
- 需要可视化路由诊断的项目
- 重视在模拟更新后快速反馈的工作流
不太适合的情况
- 严重依赖复杂动态代理链的场景
- 不想在构建时或通过插件进行集成的极简设置
Mokup 并不试图取代所有的模拟解决方案。它旨在让模拟更容易采用、更易调试，并且更贴合日常开发工作流。
结束
Mokup 正在快速演进。非常欢迎反馈，包括功能请求、DX 反馈以及文档改进。
如果这对您的工作流有帮助，欢迎提供反馈和功能请求。