组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。赶快搭建自己的组件库吧，这瓜保甜！
需求背景
为什么要搭建组件库？
虽然业界已经有很多成熟优秀的ui库可以供我们使用，也为我们解决了很多问题。但是基础的东西总是不能满足所有业务场景，更多时候我们需要扩展功能来满足业务的需求，好比 table 需要自定列这样的～相信这也是很多小伙伴开发时候的场景。
- 跨项目复用。很多时候为了方便，只是基于当前项目对组件进行二次封装（反正我是这样干的哈哈），然后做其他项目遇到同样场景时，要么copy（经常忘记之前封装在哪个项目里了🌚）、要么重新干一个...总是缺少一个统筹的地方，复用很不方便。
- 组件使用文档。文档产出对于一线开发来说可能相对比较欠缺，因为大家都忙于撸业务，文档这种奢侈品能省一点是一点。这样导致一个问题就是自己封装的组件别人不会用、不知道在哪里用，甚至不知道有这么个东西。
- 跨团队共建发展。大多B端系统都是以
element、antd等ui框架为主，基于各种业务场景，基本都会有自己团队的二次封装。其实类似的功能扩展肯定会有的，如果有组件库把组件都集中起来，就能减少很多重复造轮子的劳动力了！
源码了解
效果演示
框架语言
- typescript
- 提高代码可靠性和可维护性
- vue/react
工程化管理
-
monorepo
- 实现组件模块化管理，方便共享和依赖管理，支持包的版本控制和发布
-
turbo
- 辅助pnpm
-
Eslint 代码质量检查
- 制定统一代码规范，使用自定义规则集；集成prettier 实现代码格式化
-
Stylelint
- 样式代码统一
-
prettier 代码格式化
- 保持代码风格，减少代码审查中的格式争论
-
Husky git hooks
- 提交代码自动运行eslint 和 prettier 确保代码符合规范
-
Lint-staged 配合Husky，针对缓存区的文件进行lint格式化
- 仅对修改的文件进行检查和格式化，提升效率
-
cspell
- 代码拼写审计
打包构建
-
tsup 打包组件库
- 生成ESM格式的包，确保兼容性和按需加载；利用插件化打包体积
-
dumi 组件库文档打包
文档与示例
- dumi 组件库文档打包
- 提供交互的组件展示，帮助开发者快速了解用法和API
- 当然还有storybook、docz等
样式管理
- css-in-js
- 使用syled-components 进行样式管理，支持动态和主题切换
- 组件内部定义样式，减少冲突；利用主题功能，实现样式全局管理和切换
- 样式体系
- 整体样式体系通过css3变量实现，样式变体的约束
状态管理
-
react Context 适用中小型组件状态管理
- 利用context API,确保状态在组件树中的高效传递
-
useSyncExternaStore
- 对于大型的应用和复杂的状态管理，自定义store，结合该API实现
国际化
- i18next
单元测试
- Jest
- React Testing Library
- 用于组件测试，可以模拟用户行为，测试组件的交互性
性能优化
- 按需加载
- 利用工具如babel-plugin-import
- 懒加载
- 采用react lazy 和 Suspense 进行加载
版本发布控制
- Semantic Release
- 用于自动化版本控制和发布
- 根据提交的信息自动生成版本号和发布日志，确保版本的一致性
如果有同学想学习框架如何搭建可以看看这个原始框架版本 git地址
