轮子系列：使用vite从零开发React组件库-Windows系列-PHP中文网

轮子系列：使用vite从零开发React组件库

看不見的法師

发布： 2025-09-08 08:18:18

原创

540人浏览过

前言

新年伊始，与团队的小伙伴们开启了一系列造轮子的项目 - 如何打造一个组件库。

Boty-Design首先，组件库需要一个响亮的名称 -> Boty-Design。

Vite最近推出了Vite2，支持React开发，我们选择Vite作为组件库的开发工具。

轮子系列：使用vite从零开发React组件库如上图所示，Vite开发环境的构建速度远超传统的Webpack，这也是我们选择Vite进行组件库开发的主要原因。

dumi由于Vite缺乏优秀的文档工具，我们并不需要为所有功能自己造轮子，因此我们选择了dumi作为文档工具集成到项目中。

dumi配置由于我们并未使用umi，我们采用了官方推荐的第三方使用方法。

代码语言：javascript代码运行次数：0运行复制```javascript // 安装模块。yarn add dumi cross-env -D// 增加启动命令，修改 package.json。 "scripts": { "dumi": "cross-env APP_ROOT=dumi dumi dev", "dumi-build": "cross-env APP_ROOT=dumi dumi build" },// 增加配置，新建 config/config.js。export default { chainWebpack(memo) { memo.plugins.delete('copy'); },};

<pre class="brush:php;toolbar:false;">
新建文档目录 dumi/docs/，这里的 dumi 目录即启动命令的环境变量 APP_ROOT，你可以随意同步修改。
<p>新建文档 dumi/docs/index.md，后续即可根据 dumi 的文档进行正常的 doc 开发。</p><p>组件 API 自动生成dumi 可以通过 JS Doc 注解 + TypeScript 类型定义的方式来自动生成组件的API。</p><p>代码语言：javascript代码运行次数：0<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="<a href="https://www.php.cn/link/c9041cfd2a40932691855abd98fd219a">http://www.w3.org/2000/svg"><path</a> d="M6.66666 10.9999L10.6667 7.99992L6.66666 4.99992V10.9999ZM7.99999 1.33325C4.31999 1.33325 1.33333 4.31992 1.33333 7.99992C1.33333 11.6799 4.31999 14.6666 7.99999 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 7.99999 1.33325ZM7.99999 13.3333C5.05999 13.3333 2.66666 10.9399 2.66666 7.99992C2.66666 5.05992 5.05999 2.66659 7.99999 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 7.99999 13.3333Z" fill="currentcolor"></path></svg>运行<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="<a href="https://www.php.cn/link/c9041cfd2a40932691855abd98fd219a">http://www.w3.org/2000/svg"><path</a> clip-rule="evenodd" d="M4.5 15.5V3.5H14.5V15.5H4.5ZM12.5 5.5H6.5V13.5H12.5V5.5ZM9.5 2.5H3.5V12.5H1.5V0.5H11.5V2.5H9.5Z" fill="currentcolor" fill-rule="evenodd"></path></svg>复制<pre class="brush:php;toolbar:false;">javascript interface BaseProps {  /**   * @description 自定义样式名   */  className?: string;  /**   * @description 自定义样式   */  style?: React.HTMLProps<htmlstyleelement>;}// dumi.md 使用<api src="../../src/components/Button/index.tsx"></api></htmlstyleelement></code></pre><p>由于我们这次基本都是用 TypeScript 开发，非常轻松就可以利用 dumi 的这个功能生成我们想要的 API，如下图：</p><p><img src="/uploads/20250430/174596871168115e478f501.jpg" alt="轮子系列：使用vite从零开发React组件库" />dumi github action + github page在项目根路径新建 .github/workflows/gh-pages.yml 文件。</p><p>代码语言：javascript代码运行次数：0<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.66666 10.9999L10.6667 7.99992L6.66666 4.99992V10.9999ZM7.99999 1.33325C4.31999 1.33325 1.33333 4.31992 1.33333 7.99992C1.33333 11.6799 4.31999 14.6666 7.99999 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 7.99999 1.33325ZM7.99999 13.3333C5.05999 13.3333 2.66666 10.9399 2.66666 7.99992C2.66666 5.05992 5.05999 2.66659 7.99999 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 7.99999 13.3333Z" fill="currentcolor"></path></svg>运行<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4.5 15.5V3.5H14.5V15.5H4.5ZM12.5 5.5H6.5V13.5H12.5V5.5ZM9.5 2.5H3.5V12.5H1.5V0.5H11.5V2.5H9.5Z" fill="currentcolor" fill-rule="evenodd"></path></svg>复制

登录后复制

javascript name: github pageson: push: branches: - master # default branchjobs: deploy: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v2 - run: yarn install - run: yarn run dumi-build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dumi/dist

<pre class="brush:php;toolbar:false;">
后续合并到 master 分支时会触发 action 自动构建，选择生成好的静态分支目录即可发布到 github page。</p><p>可能遇到的问题config/config.js 不生效由于你的启动命令已经指定了 APP_ROOT，也就是修改了运行路径，所以把 config 也放在 APP_ROOT 指定路径下。</p><p>dumi 在 Windows 下构建失败这个暂时无解，生成静态文件的路径格式在 Windows 下不合法，直接在 Linux 或者 macOS 上构建是正常的，所以用 GitLab Action 是可以的。</p><p>别名不生效修改 config/config.js 或者 .umirc.ts。</p><p>代码语言：javascript代码运行次数：0<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="<a href="https://www.php.cn/link/c9041cfd2a40932691855abd98fd219a">http://www.w3.org/2000/svg"><path</a> d="M6.66666 10.9999L10.6667 7.99992L6.66666 4.99992V10.9999ZM7.99999 1.33325C4.31999 1.33325 1.33333 4.31992 1.33333 7.99992C1.33333 11.6799 4.31999 14.6666 7.99999 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 7.99999 1.33325ZM7.99999 13.3333C5.05999 13.3333 2.66666 10.9399 2.66666 7.99992C2.66666 5.05992 5.05999 2.66659 7.99999 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 7.99999 13.3333Z" fill="currentcolor"></path></svg>运行<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="<a href="https://www.php.cn/link/c9041cfd2a40932691855abd98fd219a">http://www.w3.org/2000/svg"><path</a> clip-rule="evenodd" d="M4.5 15.5V3.5H14.5V15.5H4.5ZM12.5 5.5H6.5V13.5H12.5V5.5ZM9.5 2.5H3.5V12.5H1.5V0.5H11.5V2.5H9.5Z" fill="currentcolor" fill-rule="evenodd"></path></svg>复制```javascript
chainWebpack(memo) {    memo.module      .rule('js')      .test(/.(js|mjs|jsx|ts|tsx)$/)      .include.add(join(__dirname, '..', '..', 'src/components')).end()      .exclude.add(/node_modules/).end()      .use('babel-loader')  },  alias: {    'boty': join(__dirname, '..', '..', 'src/components'),  },

登录后复制

配置完成后可以正常在 dumi 的 md 文件中使用别名。

开始启航前期准备工作已经基本完成，接下来就进行一轮造轮子的工程。

这里首先感谢 Ant Design 团队，我们的轮子的设计与部分内容都是参考（借鉴）了业内专业的 Ant Design。

零一万物开放平台

零一万物大模型开放平台

查看详情

第一个组件 Button刚开始肯定不能选择最难的，否则做不出来就容易放弃。

因此选择 button 组件来练手（其实内容也不少 = =！），先分析一下 button 的功能。

轮子系列：使用vite从零开发React组件库其实大体就是自定义样式、功能与预设样式、功能。

我们在里面加入了一些贴合业务的功能，比如当 loading 存在时，与 antd 的设计不同，不是由开发者去开启、关闭 loading 的状态，而是直接将 click 方法作为异步函数，点击时就开启 loading 状态，等待回调结束会关闭 loading 状态。

为什么要造轮子距离上一次我造轮子，大概过去了 5 年，也是根据 VUM1.0 去改造的升级版本，当时的作者言川大佬在 vue2 出来的时候，没有抽得出空来更新 VUM 这个 vue 移动端组件库，而我是 Vue 的初学者，本着更深入学习的想法，就将 VUM 从 vue1 升级到 vue2。虽然那个时候很忙，但是收获还是蛮多也挺开心的。

这一次的轮子也不是从零开发，毕竟我们站在了 AntD 这个巨人的肩膀上，可以看得更远。

在这个项目中，除了技术之外，更多的可能是从设计、产品的角度来打磨这套产品。

同时也希望这个项目能对一些同学有一定的帮助。

写在最后项目介绍项目地址

项目预览地址

我们会反复修改一些细节部分，有想追的朋友可以 star 一下。

项目成员清尘 - 负责样式serializedowen - 负责PUACookieBoty - 负责打杂

以上就是轮子系列：使用vite从零开发React组件库的详细内容，更多请关注php中文网其它相关文章！