r-button

基于 Vite 封装 React Button 组件 （带测试、文档、打包、发布全流程）

环境要求

- Node.js 20.19 或以上版本
- npm 或 yarn 包管理器
- react 18.2 或以上版本

初始化vite+react+typescript项目

``bash

初始化项目

npm create vite@latest r-button -- --template react-ts

进入项目目录

cd r-button

安装依赖

npm install
`

组件开发

- 类型定义
- 功能、样式
- 导出

组件测试

使用 vitest（Vite 生态推荐，配置简单）+ @testing-library/react 进行组件测试，确保组件功能稳定性。

$3

`bash
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom @types/testing-library__jest-dom
`

$3

修改vite.config.ts，添加测试选项

$3

src/components/Button/Button.test.tsx

$3

组件文档

建议使用 Storybook（前端组件文档工具，适配 React/Vite）生成组件文档，方便他人查阅和使用。

组件打包

Vite 默认打包为应用程序，需要修改配置，打包为 可复用的库模式（Library Mode），生成符合 NPM 规范的产物（ES Module + CommonJS）。
- 修改 vite.config.ts，添加库模式打包选项
- 修改 package.json，添加导出选项
- 修改 tsconfig.json`

组件发布

- npm login 登录
- npm pack 发布前检查
- npm publish --access=public 发布