2dev

一个简单的基于Web的目录查看工具，展示如何使用 pnpm workspace + Koa + React 构建可通过 npx 使用的CLI工具。

功能

• 📁 显示当前目录的文件列表（排除隐藏文件）
• 🌐 Web界面展示
• 📦 可通过 npx 直接使用

快速开始

使用 npx（发布到npm后）

npx 2dev

然后访问 http://localhost:3000

全局安装

npm install -g 2dev
# 或
pnpm install -g 2dev

# 使用
2dev

开发

安装依赖

pnpm install

开发模式

开发模式下，前端和后端分别运行：

• 前端：Vite开发服务器（默认端口5173）
• 后端：Koa API服务器（默认端口3000）
• 前端通过proxy访问后端API

# 同时启动前后端
pnpm dev

# 或分别启动
pnpm dev:frontend
pnpm dev:backend

构建

pnpm build

本地测试

# 构建并启动生产环境
pnpm build
pnpm start

访问 http://localhost:3000

发布到 npm

1. 登录 npm

   npm login

2. 修改包名（如果 2dev 已被占用） 编辑 package.json，修改 name 字段为可用的包名。

3. 发布

   npm publish

   注意：发布时会自动执行 prepublishOnly 脚本构建项目。

4. 测试发布的包

   npx your-package-name

项目结构

2dev/
├── packages/
│   ├── frontend/          # React + Vite前端
│   └── backend/           # Koa2后端API
├── bin/
│   └── cli.js            # CLI入口文件
├── pnpm-workspace.yaml   # pnpm workspace配置
└── package.json          # 根package.json（CLI配置）

技术栈

• 前端: React 19 + Vite 7 + TypeScript
• 后端: Koa 3 + @koa/router + TypeScript
• 包管理: pnpm workspace
• 构建工具: Vite (前端) + tsc (后端)

环境说明

• 开发环境: 前后端独立运行，前端通过proxy访问后端
• 生产环境: 后端托管前端dist静态资源，单一服务端口

API接口

• GET /api/health - 健康检查
• GET /api/files - 获取当前目录文件列表（排除隐藏文件）

License

MIT