97 lines
2.3 KiB
Markdown
97 lines
2.3 KiB
Markdown
# MDX Dynamic Content Preview
|
|
|
|
一个基于 Vite + React 的 MDX 动态内容预览器，支持实时编译和热重载。
|
|
|
|
## 功能特性
|
|
|
|
- ✅ **实时 MDX 编译** - 使用 @mdx-js/mdx 进行编译
|
|
- ✅ **热重载** - MDX 文件修改后自动刷新预览
|
|
- ✅ **TypeScript 支持** - 完整的类型安全
|
|
- ✅ **组件自定义** - 支持自定义 React 组件样式
|
|
- ✅ **开发体验** - Vite 提供的快速 HMR 和构建
|
|
- ✅ **错误处理** - 友好的错误显示和加载状态
|
|
|
|
## 快速开始
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### 启动开发服务器
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
访问 http://localhost:3000 查看预览效果。
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
test-mdx/
|
|
├── public/
|
|
│ └── example.mdx # 示例 MDX 文件
|
|
├── src/
|
|
│ ├── app.tsx # 主应用组件
|
|
│ └── main.tsx # 应用入口
|
|
├── index.html # HTML 模板
|
|
├── package.json # 项目配置
|
|
├── tsconfig.json # TypeScript 配置
|
|
├── tsconfig.node.json # Node.js TypeScript 配置
|
|
└── vite.config.ts # Vite 构建配置
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
1. 将你的 MDX 文件放在 `public/` 目录下
|
|
2. 修改 `src/app.tsx` 中的文件路径：
|
|
```typescript
|
|
const response = await fetch('/your-file.mdx?t=' + Date.now());
|
|
```
|
|
3. 运行开发服务器即可看到预览效果
|
|
|
|
## 自定义组件样式
|
|
|
|
在 `src/app.tsx` 中的 `components` 对象中自定义各种 Markdown 元素的样式：
|
|
|
|
```typescript
|
|
const components = {
|
|
h1: (props) => <h1 style={{ color: 'blue' }} {...props} />,
|
|
p: (props) => <p style={{ fontSize: '16px' }} {...props} />,
|
|
// 添加更多组件...
|
|
};
|
|
```
|
|
|
|
## 热重载机制
|
|
|
|
- 开发模式下每 2 秒自动检查 MDX 文件变化
|
|
- 使用时间戳参数避免缓存问题
|
|
- 显示重载状态指示器
|
|
- 修改后即时更新预览
|
|
|
|
## 技术栈
|
|
|
|
- **Vite** - 构建工具和开发服务器
|
|
- **React** - UI 框架
|
|
- **TypeScript** - 类型安全
|
|
- **@mdx-js/mdx** - MDX 编译器
|
|
- **@mdx-js/react** - React 集成
|
|
- **vite-plugin-static-copy** - 静态文件复制
|
|
|
|
## 开发脚本
|
|
|
|
- `pnpm dev` - 启动开发服务器
|
|
- `pnpm build` - 构建生产版本
|
|
- `pnpm preview` - 预览构建结果
|
|
|
|
## 许可证
|
|
|
|
MIT License |