# f2e-create-template

**Repository Path**: f2e-server/f2e-create-template

## Basic Information

- **Project Name**: f2e-create-template
- **Description**: f2e3 create 模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://shy2850.com:2850/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-10
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# f2e-create-template

基于 f2e-server3 的现代化前端项目模板，集成了 React、TypeScript、Tailwind CSS 和 esbuild 构建工具。

## 项目概述

这是一个使用 f2e-server3 框架创建的现代化前端开发模板，提供了开箱即用的开发环境，支持热更新、快速构建和现代化的前端技术栈。

## 技术栈

- **开发框架**: f2e-server3 (v1.13.5-alpha) - 现代化前端开发服务器
- **前端框架**: React 19.0.0
- **UI 库**: React DOM 19.0.0
- **语言**: TypeScript
- **样式**: Tailwind CSS 4.1.5
- **构建工具**: esbuild 0.25.0
- **样式插件**: esbuild-style-plugin-v2 1.6.5
- **CSS 处理**: PostCSS + @tailwindcss/postcss
- **代码检查**: Biome 2.3.2
- **文件监听**: chokidar 4.0.3

## 项目结构

```
f2e-create-template/
├── .esbuildrc.js           # ESBuild 构建配置
├── biome.json             # Biome 代码检查配置
├── index.html             # 主页面模板
├── package.json           # 项目配置和依赖
├── tailwind.config.js     # Tailwind CSS 配置
├── tsconfig.json          # TypeScript 配置
├── start.mjs              # f2e-server3 服务器启动文件
├── src/                   # 源代码目录
│   ├── index.tsx         # React 应用入口
│   └── index.css         # 全局样式文件（Tailwind CSS）
├── output/               # 构建输出目录
└── README.md            # 项目说明文档
```

## 核心特性

### 1. 基于 f2e-server3 的强大功能

- **多运行时支持**: 兼容 Node.js、Bun、Deno 和 uWebSockets.js
- **热更新**: 基于 EventSource 实现实时页面刷新
- **高性能构建**: 集成 esbuild 提供极速的 JavaScript 构建
- **现代化 CSS 处理**: 支持 PostCSS 和 Tailwind CSS
- **Gzip 压缩**: 自动启用压缩优化
- **文件监听**: 智能文件变化检测和自动重载

### 2. 开发体验优化

- **TypeScript 支持**: 完整的类型检查和智能提示
- **Tailwind CSS**: 实用优先的 CSS 框架，快速构建界面
- **开发服务器**: 内置开发服务器，支持代理和路由
- **代码检查**: Biome 提供快速的代码检查和修复
- **自定义断点**: 支持 c-sm (1440px) 和 c-md (1920px) 自定义屏幕尺寸

## 快速开始

### 环境要求

- Node.js 16+ 或 Bun 或 Deno
- npm 或 yarn 包管理器

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
# 或
node start.mjs -m dev
```

开发服务器将在 `http://localhost:2850` 启动，支持热更新和实时重载。

### 构建生产版本

```bash
npm run build
# 或
node start.mjs -m build
```

构建文件将输出到 `output` 目录。

## 配置说明

### 服务器配置 (start.mjs)

```javascript
createServer({
    mode,                    // 运行模式: dev, build, prod
    gzip: true,             // 启用 Gzip 压缩
    buildFilter: pathname => /^(index|$)/.test(pathname),  // 构建文件过滤
    watchFilter: pathname => /^(index|src|$)/.test(pathname), // 监听文件过滤
    outputFilter: pathname => /^(index|static|$)/.test(pathname), // 输出文件过滤
    try_files: 'index.html', // 默认文件
    dest: 'output',         // 输出目录
})
```

### TypeScript 配置 (tsconfig.json)

```json
{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "jsx": "react-jsx",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "strict": true
    },
    "include": [
        "src/**/*"
    ]
}
```

### ESBuild 配置 (.esbuildrc.js)

项目使用 ESBuild 进行快速构建，主要配置包括：

```javascript
{
    entryPoints: {
        'index': 'src/index.tsx'
    },
    outdir: 'static',
    bundle: true,
    format: 'iife',
    target: 'chrome70',
    external: ['react', 'react-dom', ...],  // 外部库优化
    plugins: [
        stylePlugin({
            postcss: {
                plugins: [
                    require('@tailwindcss/postcss')({
                        config: './tailwind.config.js'
                    })
                ]
            }
        })
    ]
}
```

### Tailwind CSS 配置 (tailwind.config.js)

```javascript
module.exports = {
    content: ["src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
        screens: {
            "c-sm": "1440px",
            "c-md": "1920px"
        }
    },
    plugins: []
}
```

## 开发指南

### 添加新组件

1. 在 `src` 目录下创建新的 `.tsx` 文件
2. 使用 TypeScript 和 React 编写组件
3. 在 `src/index.tsx` 中导入并使用

### 样式开发

项目使用 Tailwind CSS，可以直接在组件中使用 Tailwind 类名：

```tsx
<div className="container mx-auto">
  <h1 className="text-center text-3xl font-bold p-4">Hello, F2E APP</h1>
</div>
```

### 样式开发

在 `src/index.css` 中使用 Tailwind 指令：

```css
@import "tailwindcss";
```

可以直接在 JSX 中使用 Tailwind 类名。

## 可用脚本

- `npm run dev` - 启动开发服务器
- `npm run build` - 构建生产版本
- `npm run test` - 运行测试（当前配置为开发模式）

## 部署

### 静态部署

构建完成后，`output` 目录包含所有静态文件，可以直接部署到任何静态文件服务器：

- Nginx
- Apache
- CDN 服务
- 静态托管平台（如 Vercel、Netlify）

### 服务器部署

如果需要服务端功能，可以直接运行：

```bash
node start.mjs -m prod
```

## 扩展功能

### 添加 API 路由

f2e-server3 支持服务端 API 开发，可以在 `start.mjs` 中添加路由：

```javascript
import { addRoute } from 'f2e-server3'

// 添加 API 路由
addRoute('api/status', async (body, ctx) => {
  return { status: 'ok', timestamp: Date.now() }
})
```

### 代理配置

支持 API 代理和跨域请求：

```javascript
createServer({
  // ... 其他配置
  proxies: [
    {
      location: '/api',
      origin: 'http://api.server.com/'
    }
  ]
})
```

## 故障排除

### 常见问题

1. **端口占用**: 默认端口 2850 被占用，可以修改 `start.mjs` 中的端口配置
2. **依赖安装失败**: 确保使用 Node.js 16+ 版本
3. **热更新不工作**: 检查文件监听权限，Windows 系统可能需要安装 `chokidar`

### 调试模式

开发模式下默认启用 DEBUG 日志级别，可以在控制台查看详细的运行信息。

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个模板。

## 许可证

ISC License

## 作者

shy2850

---

基于 [f2e-server3](https://gitee.com/f2e-server/f2e-server-3) 构建