r-button

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

环境要求

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

初始化vite+react+typescript项目

# 初始化项目
npm create vite@latest r-button -- --template react-ts
# 进入项目目录
cd r-button
# 安装依赖
npm install

组件开发

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

组件测试

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

安装依赖

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

配置 vitest

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

编写组件测试用例

src/components/Button/Button.test.tsx

执行测试

组件文档

建议使用 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 发布