# iota-react-component

**Repository Path**: coder-farmer/iota-react-component

## Basic Information

- **Project Name**: iota-react-component
- **Description**: 给予rollup 创建的一个react cli，目的：
1. 创建一个可开箱即用的react 组件库底包
2. 可以直接运行进行测试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-06
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iota-react 组件库

## 项目简介
这是一个基于 Rollup 实现的 React 组件包工具，用于开发和打包 React 组件库。

### 功能特性
- ✅ React 组件打包
- ✅ 开发环境实时预览
- ✅ TypeScript 支持
- ✅ 企业级构建配置
- ✅ 完整的类型定义

## 目录结构

```
iota-react-component/
├── config/              # 构建配置目录
│   └── rollup/          # Rollup 配置文件
├── dist/                # 开发构建输出目录（用于本地测试）
├── examples/            # 示例应用目录
├── lib/                 # 生产构建输出目录（用于库发布）
├── public/              # 静态资源目录
├── src/                 # 源代码目录
│   ├── Home/            # Home 组件
│   ├── Login/           # Login 组件
│   ├── types/           # 类型定义
│   └── index.ts         # 组件导出
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
└── README.md            # 项目文档
```

## 构建输出说明

### 1. lib 目录（库输出）
- **用途**：用于组件库发布，供其他项目通过 npm 安装使用
- **内容**：
  - ES 模块格式的 JavaScript 文件
  - 完整的 TypeScript 类型定义文件（`.d.ts`）
  - Source maps 用于调试
- **特点**：
  - 只包含组件库代码，不包含依赖
  - 依赖项（如 React、ReactDOM、antd）作为外部依赖
  - 支持 tree-shaking

### 2. dist 目录（项目输出）
- **用途**：用于本地开发测试，包含完整的应用
- **内容**：
  - 完整的应用打包（包括 React 和 ReactDOM）
  - 生成的 HTML 文件用于开发测试
  - 支持热重载和实时预览
- **特点**：
  - 包含所有依赖，可直接在浏览器中打开
  - 用于验证组件在实际应用中的表现

## 快速开始

### 安装依赖
```bash
npm install
# 或
yarn install
```

### 开发模式
```bash
npm run dev
# 或
yarn run dev
```
- 启动开发服务器，访问 http://localhost:18802
- 支持热重载，修改代码后自动刷新

### 生产构建
```bash
npm run build
# 或
yarn run build
```
- 构建组件库到 lib 目录
- 生成类型定义文件和 source maps

### 类型检查
```bash
npm run build:check
# 或
yarn run build:check
```
- 运行 TypeScript 类型检查，确保代码类型安全

## 配置说明

### Rollup 配置
- **config/rollup.config.mjs**：生产构建配置，用于打包组件库
- **config/rollup.config.dev.mjs**：开发模式配置，用于本地测试
- **config/rollup/**：模块化配置目录，包含基础配置和环境特定配置

### TypeScript 配置
- **tsconfig.json**：TypeScript 编译配置，启用严格类型检查

### 依赖说明
- **peerDependencies**：React 和 ReactDOM，需要用户项目提供
- **dependencies**：antd 等组件库依赖
- **devDependencies**：构建工具和开发依赖

## 使用组件库

### 1. 安装
```bash
npm install iota-react
# 或
yarn add iota-react
```

### 2. 导入使用
```tsx
import React from 'react';
import { Login, Home } from 'iota-react';

const App = () => {
  return (
    <div>
      <Login title="登录" />
      <Home />
    </div>
  );
};

export default App;
```

## 开发指南

### 添加新组件
1. 在 `src` 目录下创建新的组件目录
2. 编写组件代码和类型定义
3. 在 `src/index.ts` 中导出新组件
4. 运行 `npm run build` 构建组件库
5. 在 `examples` 目录中测试组件

### 测试组件
- 开发模式：`npm run dev`，在浏览器中查看组件效果
- 类型检查：`npm run build:check`，确保类型定义正确

## 发布指南
1. 运行 `npm run clean` 清理构建产物
2. 运行 `npm run build` 构建最新版本
3. 更新 `package.json` 中的版本号
4. 运行 `npm publish` 发布到 npm

## 技术栈
- **React**：19.2.5
- **TypeScript**：6.0.2
- **Rollup**：4.60.1
- **antd**：6.3.5
- **Sass**：1.99.0

## 注意事项
- 开发模式下，组件会自动热重载，无需手动刷新
- 生产构建前，建议运行 `npm run build:check` 进行类型检查
- 发布前，确保更新版本号并运行 `npm run prepublishOnly` 确保构建产物正确