2024年如何通过完善的工程化，从0到1手把手建立个人 react 组件库

本文聚焦于快速创建并部署个人的组件库，方便平时开发中将通用的组件抽出，也可用于简历上展示个人的组件成果~

组件库体验地址：components-library

关于以上内容，你是否好奇如何实现的，对于大多数项目，诸如：antd element-plus 等，这些都是通过自己编写 md 表格去自定义的，但是对于个人开发的组件库，这显然是不太行的，因为这需要耗费大量时间去编写不太高频的内容，所以这方面显然是要通过自动化的形式完成，这也是本组件库需要攻克的重点！

关于上图内容其实只需要下面4行内容即可，是不是很震惊 😱

## Disabled Calendar

<code src="src/compoents/Calendar/demo/index.tsx" />

## Calendar Props

<Props src="src/compoents/Calendar.tsx" />

一、快速初始化项目

目前市面上已经有很多项目格式化规范教程，这里就不再赘述了

这里直接可以使用npx @winches/ts-start@latest可以选择 react-components-library模版即可使用该模版

组件库的技术栈为： react + tailwindcss + rspress + vite + tsup

✨ 其次还可以学习到组件库工程化内容/插件/playground的编写

🌟 模版亮点

模版基于 rspress 实现了一套插件自动生成组件预览和组件API文档，只需要注意编写的格式即可

🛠️ 插件系统

通过rspress集成的remark插件系统，开发了组件API自动生成插件，提升个人开发的效率，感兴趣的可以查看源码实现

路径位于：docs/plugins/generate-props.ts

支持：

1. Mdx 文件 Props 组件自动生成组件 API
2. 跳转到组件源码

📻 playground 组件开发

关于组件库的开发肯定少不了组件预览，所以也实现了一套可以快速开发的工程

只需要在开发的组件下创建demo目录，随后在该目录下创建xxx.tsx文件

最后你就可以运行playground下的dev指令，它会自动抓取你demo目录下的文件到plaryground下，随后可以通过浏览器路由的方式查看你正在开发的组件

demo下的组件也可以用于docs中文档的展示，极大减少开发者的工作

关于该内容的实现：

路径：playground/app.init.ts playground/main.tsx

🤖 组件库的详细用法

Note：有需要自取，下面的内容属于组件库的详细用法介绍，以及部署流程

1. 组件开发/预览

Playground 查看并开发组件