Component Library

基于 Vite + React 的组件库项目

技术栈

• 构建工具: Vite 5.x
• 框架: React 18.2.0
• 样式: Less
• 类型: TypeScript (可选)

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 预览构建产物
npm run preview

# 监听模式构建
npm run build:watch

# 登录npmjs
npm login

# 推向公共包
npm publish --access=public

项目结构

componentlibrary/
├── src/
│   ├── components/      # 组件目录
│   │   ├── Button/
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   └── Popover/
│   │       ├── index.js
│   │       └── index.less
│   ├── styles/          # 全局样式
│   │   └── variables.less
│   ├── demo/            # 开发演示页面
│   │   └── index.tsx
│   └── index.ts         # 库入口文件
├── dist/                # 构建输出目录
├── vite.config.js       # Vite 配置
└── package.json

使用

在项目中使用

# 通过 npm link 本地开发
cd componentlibrary
npm link

cd ../umiprojects
npm link @yungu-fed/componentlibrary

导入组件

import { Button, Popover } from '@yungu-fed/componentlibrary';
import '@yungu-fed/componentlibrary/style'; // 引入样式

构建说明

• ES 模块: dist/index.es.js - 用于现代打包工具
• UMD: dist/index.umd.js - 用于浏览器直接引用
• 类型定义: dist/index.d.ts - TypeScript 类型
• 样式文件: dist/style.css - 组件样式

注意事项

1. React 和 React-DOM 作为 peerDependencies，需要在宿主项目中安装
2. 组件库使用 Less，确保宿主项目支持 Less 或引入编译后的 CSS
3. 开发时使用 npm run dev 启动演示页面
4. 构建时使用 npm run build 生成生产版本