Dumi发布React组件库、部署GitHubPage、发布npm一条龙服务

saintofficial
162 阅读5分钟

前言

最近开发了一套自己的组件库，整个过程研究了不少东西，所以分享出来

这是我的React组件库和源码，目前更新了一些我常用的组件，后续也会持续更新

正文

Dumi

Dumi为组件研发而生的静态站点框架,类似的其实还有storybook、vitePress，为啥选择dumi，一个是框架比较简单易懂，在里面编写组件的时候也和你平时开发组件一样；另一个是他只支持React，默认会安装React，所以对React的支持度是比较好的，本质算是个React项目。

这里就不仔细介绍是啥了，可以看官网，然后框架搭建流程其实就是按照官网就行。

  1. 确保你的node在14+以上
node -v
v14+
  1. 创建一个空目录，运行git bash或者在ide终端进入到空目录，运行命令
# 通过官方工具创建项目，一开始可能先让你安装npx啥的，yes走下去就是了
npx create-dumi

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

# 选择包管理工具，看你自己
? Pick NPM client » - Use arrow-keys. Return to submit.
>   npm
    cnpm
    tnpm
    yarn
    pnpm

# 项目的包名->package.json里的name属性
? Input NPM package name 

# 项目描述
? Input project description » A react library developed with dumi

# 输入个邮箱，不能直接回车
? Input project author (Name <email@example.com>)

# 安装依赖后启动项目
$ npm start
  1. 运行项目，http://localhost:8000 基本就会看到这个页面了

image.png

  1. 接下来是一下配置，一些文件与UI的对应关系，其实文档基本都有解释，看文档最好了 image.png

.dumirc.ts，算是配置路由的地方，顶部导航栏

import { defineConfig } from 'dumi';

export default defineConfig({
  outputPath: 'docs-dist',
  base: '/czh_react_ui/',
  publicPath: '/czh_react_ui/',
  themeConfig: {
    name: 'czh-ui',
    nav: [
      { title: 'Think', link: '/guide' },
      { title: 'Component', link: '/components/input' },
    ],
    socialLinks: {
      github: 'https://github.com/czh13/czh_react_ui',
    },
    nprogress: true,
    showLineNum: true,
    lastUpdated: false,
    editLink: false,
  },
});

src，文件夹存放你开发组件的地方，我的组件文件结构是这样的

demo 写组件样例的地方
styles 写组件样式
index.md 组件描述页面
index.tsx 组件代码

image.png

  1. index.tsx开发组件没啥其他注意，就按你平时正常写代码，然后就是看你怎么封装了
  2. 主要是这个index.md,这个文件是对你组件描述的，可能需要去学习一些markdown怎么写，我之前就有一直在用Typora，所以感觉还行
<!-- 左侧侧边栏的描述，官方文档也有介绍 -->
---
title: NavBar
group:
  title: 导航组件 
  order: 2
---

## 介绍

导航栏组件 NavBar
​

## 示例

<!-- 可以通过code加载示例代码，dumi会帮我们做解析 -->

<code src="./demo/base.tsx"></code>

​

## APi

<!-- 会生成api表格 -->

| 属性      | 类型                | 默认值 | 必填  | 说明                                                   |
| :-------- | :------------------ | :----- | :---- | :----------------------------------------------------- |
| leftArrow | React.ReactNode;    | true   | false | 是否显示返回区域的箭头,也可以自定义箭头                |
| leftText  | string              | -      | false | 返回区域文字                                           |
| right     | React.ReactNode;    | -      | false | 右侧内容                                               |
| style     | React.CSSProperties | -      | false | 内联样式，可选样式`--nav-bar-height` `--border-bottom` |
| onBack    | -                   | -      | false | 左侧点击事件                                           |

GitHubPage

github有提供一个功能，可以部署一个属于我们自己的静态网站，可以将我们开发的组件文档部署在线上，这样我们就可以通过链接随时访问，官方文档也有教我们怎么部署d.umijs.org/guide/faq ，可惜我当初没看到，所以这个部署是自己折腾出来的，不过大差不差。

  1. 在github创建一个仓库，然后将我们的代码和仓库关联，上传我们的代码
  2. 我们要实现的是每次上传代码自动部署，所以需要使用到github的Actions

image.png main.yml，这个文件最好还是从github里创建，我当时在代码创建上传到github部署没成功，不过我自己也不知道是不是因为这个创建导致失败。还有这个文件内容网上啥样都有，缺这缺那的，不用过分纠结，下面是我自己精简的

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
        
        # 打包代码，dumi的打包命令
      - name: Install and Build 🔧 
        run: |
          npm install 
          npm run docs:build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages # 部署分支
          folder: docs-dist #dumi打包成功置换的文件夹
  1. gh-pages分支需要我们创建，当时以为会自己创建，搞半天，命令没要求，和上面文件对应上就行
  2. 修改.dumirc.ts路径，这块官网文档也有说，为什么要修改可以看这篇，还是很好理解的
export default defineConfig({
  outputPath: 'docs-dist',
  base: '/czh_react_ui/',
  publicPath: '/czh_react_ui/',
  themeConfig: {
    ...
  },
});

  1. 我们需要到setting修改我们新建的分支 image.png

  2. 上传代码到仓库，基本就开始部署了，每次我们提交一次，会有两个部署过程，如果有证明成功 image.png

  3. 部署成功之后，就生成链接了czh13.github.io/czh_react_u… ，同时gh-pages也只有打包的内容 image.png

image.png

发布npm

  1. 需要用于个npm的账号www.npmjs.com/， 官网注册登录个
  2. 添加修改一些package.json的消息
{
  "name": "xx-ui", // 包名，必须要独一无二
  "version": "1.0.0", // 版本号
  "author": "xxx", // 作者
  "description": "common toolkit", // 描述信息
  "keywords": ["utils", "format", "money", "phone"], // 关键词，提升SEO
  "repository": {
    // 代码托管位置
    "type": "git",
    "url": "https://github.com/xxx/xx-ui"
  },
  "license": "ISC", // 许可证
  "homepage": "https://your-package.org", // 包的主页或者文档首页
  "scripts": {
    // 存放可执行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    // 运行依赖
  },
  "devDependencies": {
    // 开发依赖
  }
}
  1. 设置一下npm源，改回原始的源
npm config set registry https://registry.npmjs.org/

4.然后基本就配置完，终端登录，开始发包，过程中可能会遇到一些问题，401、forbidden等等，Google一个一个解决就是了

// 登陆
npm login

// 控制台会提示输入相关信息
Log in on https://registry.npmjs.org/
Username:  // 用户名
Password: // 密码
Email: (this IS public) // 邮箱
Enter one-time password: // 邮箱会收到验证码
Logged in as xxx on https://registry.npmjs.org/.

结尾

至此，一条龙服务就结束了，中间可能会遇到各种问题，当初也花了不少时间，基本都可以解决的。

avatar
文章
阅读
粉丝