mcpField
B
bun-init

bun-init

github.com/daleseo开发441 次安装40 周前更新
代码仓库

关于 bun-init

bun-init 是用于初始化 Bun 项目的技能，涵盖 CLI 工具、Web 应用、API 服务和库。它会指导项目结构、TypeScript 设置、脚本、环境变量模板及基础测试的配置。

主要功能

  1. 01使用 bun init 初始化项目
  2. 02按项目类型配置 TypeScript
  3. 03生成对应的项目目录结构
  4. 04设置脚本与环境变量模板
  5. 05添加基础 Bun 测试

适用场景

  1. 01启动 Bun CLI 工具或 Web 应用
  2. 02搭建 API 服务或可复用库
  3. 03配置 TypeScript 与项目脚本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/daleseo/bun-skills --skill bun-init

安装后在 Claude Code 中输入/bun-init确认已加载。

详细介绍

Bun 项目初始化

你正在协助初始化一个新的 Bun 项目。请按照以下步骤创建结构完善、配置优化的项目。

工作流

1. 检查先决条件

首先，确认已安装 Bun：

bun --version

如果尚未安装 Bun，请提供适用于用户平台的安装说明。

2. 确定项目类型

询问用户想要创建哪种类型的项目：

  • CLI 工具：带有 bin 入口点的命令行应用
  • Web 应用：使用 React/Vue 等的前端应用
  • API 服务：带有路由框架的后端 API
  • 库：可发布到 npm 的可复用软件包
3. 运行 Bun Init

执行初始化命令：

bun init -y

这会创建：

  • 带有针对 Bun 优化的脚本的 package.json
  • 带有推荐 TypeScript 设置的 tsconfig.json
  • 作为入口点的 index.ts
  • 包含基本项目信息的 README.md
4. 增强 TypeScript 配置

读取生成的 tsconfig.json，并根据项目类型进行增强：

CLI 工具：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "types": ["bun-types"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

Web 应用：

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "types": ["bun-types"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

API 服务：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "types": ["bun-types"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

库：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "types": ["bun-types"],
    "strict": true,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}
5. 创建项目结构

生成适当的目录结构和文件：

CLI 工具：

project/
├── src/
│   ├── index.ts          # Main CLI entry point
│   ├── commands/         # Command handlers
│   └── utils/            # Shared utilities
├── tests/
│   └── index.test.ts
├── package.json
├── tsconfig.json
├── .gitignore
├── .env.example
└── README.md

创建 src/index.ts：

#!/usr/bin/env bun

console.log("Hello from Bun CLI!");

// Example: Parse command line arguments
const args = process.argv.slice(2);
console.log("Arguments:", args);

更新 package.json，添加 bin 字段：

{
  "bin": {
    "your-cli-name": "./src/index.ts"
  }
}

Web 应用：

project/
├── src/
│   ├── index.tsx         # App entry point
│   ├── components/       # React components
│   ├── styles/           # CSS/styles
│   └── utils/            # Utilities
├── public/
│   └── index.html
├── tests/
├── package.json
├── tsconfig.json
├── .gitignore
├── .env.example
└── README.md

API 服务：

project/
├── src/
│   ├── index.ts          # Server entry point
│   ├── routes/           # Route handlers
│   ├── middleware/       # Express/Hono middleware
│   ├── services/         # Business logic
│   └── types/            # TypeScript types
├── tests/
├── package.json
├── tsconfig.json
├── .gitignore
├── .env.example
└── README.md

创建 src/index.ts：

const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Server running at http://localhost:${server.port}`);

库：

project/
├── src/
│   ├── index.ts          # Main export
│   └── types.ts          # Type definitions
├── tests/
├── package.json
├── tsconfig.json
├── .gitignore
└── README.md
6. 创建 .gitignore

生成一份完整的 .gitignore：

# Bun
node_modules
bun.lockb
*.bun

# Environment
.env
.env.local
.env.*.local

# Build outputs
dist/
build/
*.tsbuildinfo

# Logs
logs
*.log
npm-debug.log*

# OS
.DS_Store
Thumbs.db

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# Test coverage
coverage/
.nyc_output/
7. 创建环境变量模板

创建 .env.example：

# Application
NODE_ENV=development
PORT=3000

# Add your environment variables here
# DATABASE_URL=
# API_KEY=
8. 更新 package.json 脚本

添加适用于项目类型的脚本：

CLI 工具：

{
  "scripts": {
    "dev": "bun run src/index.ts",
    "test": "bun test",
    "lint": "bun run --bun eslint src",
    "typecheck": "bun run --bun tsc --noEmit"
  }
}

Web 应用：

{
  "scripts": {
    "dev": "bun run --hot src/index.tsx",
    "build": "bun build src/index.tsx --outdir=dist --minify",
    "test": "bun test",
    "typecheck": "bun run --bun tsc --noEmit"
  }
}

API 服务：

{
  "scripts": {
    "dev": "bun run --hot src/index.ts",
    "start": "bun run src/index.ts",
    "test": "bun test",
    "typecheck": "bun run --bun tsc --noEmit"
  }
}

库：

{
  "scripts": {
    "build": "bun build src/index.ts --outdir=dist --minify --sourcemap=external",
    "test": "bun test",
    "typecheck": "bun run --bun tsc --noEmit",
    "prepublishOnly": "bun run build && bun test"
  }
}
9. 安装常用依赖

根据项目类型，建议安装常用依赖：

CLI 工具：

bun add commander chalk ora
bun add -d @types/node

Web 应用：

bun add react react-dom
bun add -d @types/react @types/react-dom

API 服务：

bun add hono
bun add -d @types/node

库：

# No default dependencies - user will add as needed
10. 创建初始测试文件

在 tests/ 中创建一个基本测试文件：

import { describe, expect, test } from "bun:test";

describe("Initial test", () => {
  test("basic assertion", () => {
    expect(1 + 1).toBe(2);
  });
});

初始化后检查清单

完成设置后，向用户提供：

  1. ✅ 确认已创建的项目类型
  2. ✅ 已生成的文件和目录列表
  3. ✅ 后续步骤：
    • 将 .env.example 复制为 .env 并进行配置
    • 如果建议安装依赖，请运行 bun install
    • 运行 bun dev 启动开发
    • 运行 bun test 验证测试是否正常运行

关键配置原则

  • 模块解析：使用 "moduleResolution": "bundler"，以支持 Bun 的原生解析
  • TypeScript 类型：始终包含 "types": ["bun-types"]
  • 不生成输出：设置 "noEmit": true，因为 Bun 可直接运行 TypeScript
  • 导入扩展名：启用 "allowImportingTsExtensions": true，以支持 .ts 导入
  • 严格模式：启用严格的 TypeScript 检查，以提升代码质量

常见调整

如果用户需要工作区（单体仓库）：

添加到 package.json：

{
  "workspaces": ["packages/*"]
}

如果用户需要路径别名：

添加到 tsconfig.json：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }
}

如果用户需要不使用 React 的 JSX：

更新 tsconfig.json：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact" // or other JSX runtime
  }
}

完成

创建所有文件后，告知用户初始化已完成，并提供以下内容的摘要：

  • 项目结构
  • 可用的 npm 脚本
  • 推荐的后续步骤
  • 适用于其项目类型的 Bun 文档链接

评论

支持 Markdown