# 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-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# f2e-create-template

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

## 项目概述

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

## 技术栈

- **框架**: f2e-server3 (v1.13.2-alpha) - 现代化前端开发服务器
- **前端框架**: React 19.0.0
- **语言**: TypeScript
- **样式**: Tailwind CSS 4.0.5
- **构建工具**: esbuild 0.25.0
- **CSS 处理**: PostCSS 8.5.1

## 项目结构

```
f2e-create-template/
├── index.html              # 主页面模板
├── package.json            # 项目配置和依赖
├── tsconfig.json           # TypeScript 配置
├── start.mjs              # 服务器启动文件
├── src/
│   ├── index.tsx          # React 应用入口
│   └── main.css           # 全局样式文件（Tailwind CSS）
└── README.md              # 项目说明文档
```

## 核心特性

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

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

### 2. 开发体验优化

- **TypeScript 支持**: 完整的类型检查和智能提示
- **热模块更新**: 支持 React 组件的热更新
- **Tailwind CSS**: 实用优先的 CSS 框架，快速构建界面
- **开发服务器**: 内置开发服务器，支持代理和路由

## 快速开始

### 环境要求

- 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', // 默认文件
    postcss: {              // PostCSS 配置
        entryPoints: {
            in: 'src/main.css',
            out: 'static/main.css',
        },
        plugins: [
            TailwindPlugin({
                optimize: mode === 'build', // 构建时优化
            }),
        ],
    },
    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/**/*"]
}
```

## 开发指南

### 添加新组件

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>
```

### 热模块更新

f2e-server3 支持热模块更新，可以在组件中使用：

```tsx
import { useState, useEffect } from 'react'

const [Hello, setHello] = useState(() => require('@/Hello').default)

useEffect(() => {
  if (import.meta.hot) {
    import.meta.hot.accept('@/Hello', (newModule) => {
      setHello(() => newModule.default)
    })
  }
}, [])
```

## 可用脚本

- `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) 构建