使用Dumi搭建一套自己的Ant Design

先放结果

背景

近期做项目抽离了几个趁手的组件，想着输出成一个组件库方便以后自己调用，这样下个项目就不要copy代码了，只需要npm install就能用，岂不美哉。（🚫：抽离的组件千万不要涉及公司的信息）

站点框架选择

看了市面上几个成熟的React站点框架，最终选择了Dumi，个人觉得配置比较简单，只需要关注组件的实现逻辑即可，其他的它会帮你自动生成。

开发过程及注意

使用Dumi 2.0需要把Node版本升级到14+。这里我建议使用Node版本管理工具来升级并管理多个版本，不然当你升级了Node最新版本后有可能会发现本地的项目用的是老的Node版本，跑不起来了🥴🥴🥴；

js 复制代码

# 清除node缓存
$ npm cache clean -f

# 全局安装node版本管理工具n（这里我使用的管理工具是n，也可根据自己喜好自行选择）
# mac电脑使用sudo npm install -g n
$ npm install -g n

# 直接安装Node最新版（如果权限不够需要加sudo）
$ n latest

这个时候我的Node最新版就已经安装完毕了，输入sudo n（mac电脑）即可随意切换Node版本，至此我们的前期准备工作就完成啦。

这是官网的新建项目流程，直接无脑回车即可；

js 复制代码

# 先找个地方建个空目录。
$ mkdir myapp && cd myapp

# 通过官方工具创建项目，选择你需要的模板
$ npx create-dumi

# 选择一个模板
$ ? Pick template type › - Use arrow-keys. Return to submit.
$ ❯   Static Site # 用于构建网站
$     React Library # 用于构建组件库，有组件例子
$     Theme Package # 主题包开发脚手架，用于开发主题包

# 安装依赖后启动项目
$ npm start

执行完成后我们就会看到一个基础的文档页面，按照Dumi官网的教程即可把自己封装的趁手的组件塞入进去，开发完成后我们需要把组件上传到npm官网，同时发布自己的站点文档。

一、发布npm流程

js 复制代码

# 如果没有npm账号请先注册，如果登录不成功大概率是网络问题，请召唤ClashX
$ npm login

$ npm run build

# 发布成功后会有邮箱提醒
$ npm publish

二、站点托管

js 复制代码

# 这里我用的是手动部署
$ npm run docs:build

$ npm run deploy

命令执行完成后我们的github就会多出一个站点分支

我们需要在setting->pages里打开托管，并设置分支为站点分支，等待30s，就可访问我们的文档啦

示例及完整代码链接： github.com/xianghengyu...

站点链接：xianghengyu.github.io/xhy-react/