# jsx2html
**Repository Path**: brightxiaohan/jsx2html
## Basic Information
- **Project Name**: jsx2html
- **Description**: A tool to convert JSX to HTML
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-03
- **Last Updated**: 2025-06-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# JSX to HTML - Next.js Static Export Project
这是一个基于 Next.js 的静态 HTML 导出项目，可以将 JSX 组件转换为可部署的静态 HTML 文件。
## 项目结构
```
jsx2html/
├── src/
│ ├── example.jsx # 原始JSX组件（黄金市场研报）
│ ├── inliner.js # Webpack入口文件
│ └── template.html # HTML模板文件
├── pages/
│ ├── index.tsx # 首页导航
│ ├── example.tsx # 基于example.jsx的页面
│ └── _app.tsx # App组件
├── styles/
│ └── globals.css # 全局样式
├── next.config.js # Next.js配置（静态导出）
├── webpack.config.js # Webpack配置（生成独立HTML文件）
├── package.json # 项目依赖
└── tailwind.config.js # Tailwind CSS配置
```
## 功能特性
- ✅ **Next.js 14** - 最新版本的React框架
- ✅ **静态导出** - 生成纯HTML/CSS/JS文件
- ✅ **Webpack打包** - 生成单一自包含HTML文件
- ✅ **Tailwind CSS** - 实用优先的CSS框架
- ✅ **TypeScript** - 类型安全的JavaScript
- ✅ **Recharts** - React图表库
- ✅ **Framer Motion** - React动画库
- ✅ **Lucide React** - 精美的图标库
- ✅ **响应式设计** - 适配移动端和桌面端
## 快速开始
### 1. 安装依赖
```bash
pnpm install
```
### 2. 开发模式
```bash
pnpm run dev
```
访问 http://localhost:3000 查看项目
### 3. 构建静态文件
```bash
pnpm run build
```
静态文件将输出到 `out/` 目录
### 4. 生成自包含HTML文件
```bash
pnpm run build:standalone
```
自包含的HTML文件将输出到 `dist/index.html`，包含所有内联的JavaScript、CSS和资源
### 5. 部署
将 `out/` 目录中的文件上传到任何静态文件托管服务：
- GitHub Pages
- Vercel
- Netlify
- AWS S3
- 或任何其他静态托管服务
对于完全自包含的单一HTML文件，可以直接部署 `dist/index.html`
## 可用脚本
- `pnpm run dev` - 启动开发服务器
- `pnpm run build` - 构建生产版本和静态导出
- `pnpm run start` - 启动生产服务器（仅在未启用静态导出时使用）
- `pnpm run lint` - 运行ESLint检查
- `pnpm run build:standalone` - 使用Webpack生成自包含HTML文件
## 页面说明
### 首页 (`/`)
- 项目介绍和导航页面
- 展示可用的页面和功能
### 黄金市场研报 (`/example`)
- 基于 `src/example.jsx` 组件
- 完整的市场分析报告
- 包含价格走势图表、交易数据分析等
- 响应式设计，支持移动端
## 配置说明
### Next.js配置 (`next.config.js`)
```javascript
const nextConfig = {
output: 'export', // 启用静态导出
trailingSlash: true, // URL末尾添加斜杠
images: {
unoptimized: true // 禁用图片优化（静态导出需要）
}
}
```
### Webpack配置 (`webpack.config.js`)
项目使用Webpack生成单一自包含HTML文件，配置了：
```javascript
module.exports = {
mode: 'production',
entry: './src/inliner.js',
// ... 其他配置
plugins: [
new HtmlWebpackPlugin({ /* ... */ }),
new MiniCssExtractPlugin({ /* ... */ }),
new HTMLInlineCSSWebpackPlugin(),
new HtmlInlineScriptPlugin()
],
// ... 更多配置
};
```
关键特性：
- 使用 `html-webpack-plugin` 生成HTML文件
- 使用 `mini-css-extract-plugin` 提取CSS
- 使用 `html-inline-css-webpack-plugin` 内联CSS
- 使用 `html-inline-script-webpack-plugin` 内联JavaScript
- 资源内联（图片、字体等）
### Tailwind配置 (`tailwind.config.js`)
项目使用Tailwind CSS进行样式设计，配置了：
- 响应式断点
- 自定义颜色
- 字体设置
- 组件和工具类
## 添加新页面
1. 在 `pages/` 目录下创建新的 `.tsx` 文件
2. 如果需要使用现有的JSX组件，从 `src/` 目录导入
3. 重新构建项目
示例：
```tsx
// pages/new-page.tsx
import React from 'react';
import Head from 'next/head';
import MyComponent from '../src/my-component';
export default function NewPage() {
return (
<>
新页面
);
}
```
## 技术栈
- **Next.js 14** - React框架
- **React 18** - UI库
- **TypeScript** - 类型安全
- **Webpack 5** - 打包工具
- **Tailwind CSS** - CSS框架
- **Recharts** - 图表库
- **Framer Motion** - 动画库
- **Lucide React** - 图标库
## 注意事项
1. **example.jsx文件** - 根据要求，不会修改 `src/example.jsx` 文件
2. **静态导出限制** - 某些Next.js功能在静态导出模式下不可用
3. **图片优化** - 静态导出时图片优化被禁用
4. **API路由** - 静态导出不支持API路由
5. **单文件HTML导出** - 使用 `build:standalone` 生成的HTML文件包含所有资源
## 部署建议
- 确保所有链接使用相对路径
- 验证所有资源（图片、字体等）正确加载
- 在不同浏览器中测试兼容性
- 检查移动端响应式效果
- 单文件HTML可直接在任何支持HTML5的浏览器中打开
## 故障排除
### 构建失败
- 检查所有导入路径是否正确
- 确保所有依赖都已安装
- 查看控制台错误信息
### 样式问题
- 确认Tailwind CSS配置正确
- 检查CSS导入路径
- 验证postcss配置
### 图表不显示
- 确认Recharts组件正确导入
- 检查数据格式是否正确
- 验证容器尺寸设置
### 单文件HTML问题
- 检查 webpack.config.js 配置
- 确保所有资源正确内联
- 验证浏览器兼容性
## 许可证
本项目仅供学习和参考使用。