轮子系列：Vite搭建React组件库教程

前言

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

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

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

如上图所示，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'); },};

新建文档目录 dumi/docs/，这里的 dumi 目录即启动命令的环境变量 APP_ROOT，你可以随意同步修改。
新建文档 dumi/docs/index.md，后续即可根据 dumi 的文档进行正常的 doc 开发。
组件 API 自动生成dumi 可以通过 JS Doc 注解 + TypeScript 类型定义的方式来自动生成组件的API。
代码语言：javascript代码运行次数：0运行复制javascript interface BaseProps {  /**   * @description 自定义样式名   */  className?: string;  /**   * @description 自定义样式   */  style?: React.HTMLProps<htmlstyleelement>;}// dumi.md 使用<api src="../../src/components/Button/index.tsx"></api></htmlstyleelement>

由于我们这次基本都是用 TypeScript 开发，非常轻松就可以利用 dumi 的这个功能生成我们想要的 API，如下图：

dumi github action + github page在项目根路径新建 .github/workflows/gh-pages.yml 文件。

代码语言：javascript代码运行次数：0运行复制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

后续合并到 master 分支时会触发 action 自动构建，选择生成好的静态分支目录即可发布到 github page。
可能遇到的问题config/config.js 不生效由于你的启动命令已经指定了 APP_ROOT，也就是修改了运行路径，所以把 config 也放在 APP_ROOT 指定路径下。
dumi 在 Windows 下构建失败这个暂时无解，生成静态文件的路径格式在 Windows 下不合法，直接在 Linux 或者 macOS 上构建是正常的，所以用 GitLab Action 是可以的。
别名不生效修改 config/config.js 或者 .umirc.ts。
代码语言：javascript代码运行次数：0运行复制```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 的功能。

其实大体就是自定义样式、功能与预设样式、功能。

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

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

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

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

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

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

项目预览地址

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

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