使用dumi轻松打造定制化组件库，运用GitHub轻松部署

站长

2023年08月27日 20:38 · 阅读数 9

在上两篇文章我们讲了如何封装图表组件。

接下来当然要封装成一个组件库，构建发包，搭建网站。分享更多人使用。

快速上手

按照 dumi官网步骤，能够很快创建一个项目模板。

# 创建目录
mkdir mycomponents && cd mycomponents

# 通过官方工具创建项目
npx create-dumi

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

# 启动
npm start

更多内容可以前往官网查看，下面我将一些使用过程中需要注意的点。

准备

下面举例我项目的目录

.
├── LICENSE
├── README.md
├── docs
│   └── index.md
    └── guide.md
├── package.json
├── src
│   ├── Histogram
│   ├── Line
│   ├── Radar
│   ├── data.d.ts
│   ├── index.ts
├── tsconfig.json
└── yarn.lock

Histogram、Line、Radar 是封装好的3个组件。

在src/index.ts入口文件中，要导出我们需要给用户使用的组件和ts类型，如下

export type { CommonRectConfigType, DataListItem, ValueType } from './data';

// 柱形图
export { default as Histogram } from './Histogram';
export type { HistogramConfigType, HistogramProps } from './Histogram';

// 折线图
export { default as Line } from './Line';
export type { LineConfigType, LineProps } from './Line';

// 雷达图
export { default as Radar } from './Radar';
export type { RadarConfigType, RadarProps } from './Radar';

官网

在代码准备好后，我们就可以开始搭建网站了，在dumi中，很简单。我们只需要在docs下写markdown文件就可以自动构建页面。执行dumi build就可以在docs-dist文件拿到所有静态资源，我们可以用来部署到自己服务中。如果不打算买域名，像我一样可以放到github上，zeng-j.github.io/react-svg-c… 。

下面来讲一下如何在 github 部署，以及注意事项。

base、publicPath

第一个要注意的就是，.dumirc.ts配置中，我们要把 base 和 publicPath 改成你的仓库名称的路径。

例如我的项目

// .dumirc.ts
import { defineConfig } from 'dumi';

export default defineConfig({
  outputPath: 'docs-dist',
  base: '/react-svg-charts/',
  publicPath: '/react-svg-charts/',
});

这是因为到时部署到 github，网站路径上会加上你的仓库名。例如 zeng-j.github.io/react-svg-charts。

base 和 publicPath 的作用很多脚手架中都很类似，我下面啰嗦下。

base的作用

上面在 docs 文件夹，我们写了index.md和guide.md。那么会生成对应的路由/和/guide，如果部署到 github 可能会路由跳转错误，例如 zeng-j.github.io/guide 是错误的，而是 zeng-j.github.io/react-svg-charts/guide，所以我们必须给路由补上前缀 react-svg-charts 。

publicPath的作用

打包好后的静态资源路径都是基于根目录的，例如打包的index.html如下。

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="/umi.6cab289a.css">
</head>
<body>
<div id="root"></div>
<script src="/umi.8d0b465c.js"></script>

</body></html>

这样会zeng-j.github.io/umi.8d0b465c.js这样请求资源导致失败，而这样才是正确的zeng-j.github.io/react-svg-charts/umi.8d0b465c.js。即index.html如下

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/react-svg-charts/favicon.png">
<link rel="stylesheet" href="/react-svg-charts/umi.6cab289a.css">
</head>
<body>
<div id="root"></div>
<script src="/react-svg-charts/umi.8d0b465c.js"></script>

</body></html>

自动部署

我们利用 Github Action 在每次 master 分支更新后自动部署，这个在官网中也有介绍

在项目根目录新建 .github/workflows/gh-pages.yml 文件。

name: github pages


on:
  push:
    branches:
      - master # default branch


jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npm run docs:build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs-dist

其实看不懂也无所谓，只要照做就行。解释下思路，每当有新代码更新到 master 分支时，会触发 github action ，gh-pages这个工具会自动打包，即执行npm run docs:build命令，然后把打包出来的静态资源docs-dist，放到一个单独创建的gh-pages分支，并上传仓库。这样目的就是让我们把源码和打包代码区分开，不要混在一起。

在这里，我们要注意的就是，要把 GITHUB_TOKEN 授权成允许读写。

使用dumi轻松打造定制化组件库，运用GitHub轻松部署

紧接着，我们在gh-pages分支已经存放静态资源了，那么我们就选择这个分支作为网站构建。如下设置。

使用dumi轻松打造定制化组件库，运用GitHub轻松部署

待不久后，我们就可以访问自己的网站啦！zeng-j.github.io/react-svg-c…

进一步解释下，我们在 master 分支更新代码时，github action 触发了哪些工作，可以看以下截图，倒数一个就是当我把代码合并到 master 分支时，我们之前配置的gh-pages.yml触发的，之后 gh-pages 分支代码更新后，github又会自动创建一个工作，用来更新网站资源。这对于习惯用 ci/cd 的同学再熟悉不过了。

使用dumi轻松打造定制化组件库，运用GitHub轻松部署

发包

这个也比较简单，我们注意需要以下配置，让包的信息更详细，以下是package.json一些配置

{
  // npm包名称
  "name": "rs-charts",
  "version": "0.0.5",
  "description": "基于react的svg图表组件库",
  // 给你的包加关键词
  "keywords": [
    "charts",
    "svg",
    "react",
    "component",
    "components",
    "frontend"
  ],
  // 包的官网展示
  "homepage": "https://zeng-j.github.io/react-svg-charts",
  // 包对应的github仓库
  "repository": {
    "type": "git",
    "url": "https://github.com/Zeng-J/react-svg-charts"
  },
  // 开源协议
  "license": "MIT",
  // 包的esm入口文件
  "module": "dist/index.js",
  // 包的ts类型文件
  "types": "dist/index.d.ts",
  // 哪些需要上传到npm上
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "father build",
    "docs:build": "dumi build",
    "doctor": "father doctor",
    "prepublishOnly": "father doctor && npm run build",
  },
  // 用户使用前必须依赖的包
  "peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
  },
  // 作者
  "authors": [
    "zeng_j@qq.com"
  ]
}

配置好后，即可执行dumi预置好的命令npm run prepublishOnly。

接下来npm官网注册账号，然后在项目目录执行npm login，最后npm publish发布。

你的所有配置都会在 npm 页面上体现。

使用dumi轻松打造定制化组件库，运用GitHub轻松部署

最后

感谢您看到最后，希望有所收获。接下来即可yarn add rs-charts安装使用。