最近较为系统的完善了个人基于 Vite 和 React 的组件库开发模板，覆盖了从开发到发布的各个关节，特在此做个系统的总结。因为也算不上权威，更多的是交流学习，姑且叫做“指北”吧。

太长不看可直接查阅代码仓库：starter-vite-react-library

🦄 目的

好几次想做点东西的时候想着要从 0 开始现搓都想着头疼，看过 antfu 大佬的相关 starter 模板之后就开始尝试搭建自己的模板了，甚至还搞了个给项目加代码规范相关的工具，之后有时间会再分享。有了痛点有了想法就开始断断续续弄了，直到最近可算比较满意了，所以有了此文。

鬼使神差甚至开坑想弄个 CODING OPEN API 的 JS/TS SDK，参考 octokit.js 取了个名字 onionkit.js 😂。另外想吐槽的是 CODING OPEN API 好像只有个网页？官方居然啥 SDK 都不提供，只能自己动手试试了。

✨ 功能亮点

默认提供如下配置：

开箱即用的统一代码风格，值得注意的是，默认使用两个空格缩进，并且去掉不必要的分号。

ESLint 规则基于 @antfu/eslint-config 并做了少许规则定制。

基于 @commitlint/config-conventional 统一 Git 提交信息格式，只能允许以下前缀：

其中 release 前缀是新增的，用于版本发布。另外，出于对 Emoji 的喜爱，所有提交消息会根据前缀自动添加相应的 Emoji，用户不能手动输入。

一个优秀的组件库怎么能没有测试覆盖呢？基于 Vitest 初始化了测试相关环境，写测试用例从现在开始。如何写好测试是个技术活儿，还在学习中。

现在越来越多活跃的 npm 库都逐渐往 ES modules 的方向迁移了，我们也就不开倒车了。基于 Vite 自行完善了库编译相关配置，默认只编译输出 ES modules 版本。

万事俱备，只欠发布了，选择了基于 changesets 做版本的发布管理，可自动生成 CHANGELOG 和版本的 Git 标签。

基于 vite-plugin-react-pages 构建组件库的在线文档，支持 MDX 文档页面，也可基于 React 自行定制开发相关页面。默认基于 Vercel 部署，提供 vercel.json 支持一键部署。

效果预览

主要工作是整合了各种工具，保证了每次需要组件库开发时可快速开工，并提供完全一致的开发体验，没有太多额外负担，各位看官还没跃跃欲试吗？😶‍🌫️

当然，还是有待优化的空间的，计划中的有：

开发模板仓库：starter-vite-react-library