基于 Vite 封装的 React Button 组件
npm install @golf-h/r-buttonbash
初始化项目
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`