带你一步步打造专属于自己的 React 组件库-项目搭建

清影y
328 阅读2分钟

当我们在开发多个 React 项目时，可能会发现一些 UI 组件的代码可以在不同项目之间共用。这时候，我们可以将这些组件独立出来，形成一个组件库，并在不同的项目中进行调用，以达到复用的目的。本文将介绍如何搭建 React 组件库，以及如何将其发布到 npm 上。

本篇文档的地址：github.com/Internation…

组件库预览地址：internationsi.github.io/sqlG

第一步：创建组件库项目

首先，我们需要创建一个新的 React 项目作为组件库的代码仓库。在命令行中进入项目文件夹，我们选择的是dumi组件库，根据组件库教授教搭建出我们的项目。

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

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

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

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

第二步：创建GitHub 的CI

  1. 文档库中有个默认的FOO组件，执行npm run docs:build 会发现我们的打包产物为 docs-dist
  2. 在根目录下创建.github/workflows/ci.ymal

ci.ymal 如下

# 项目名
name: dumi book test

# 只有在master分支发生push事件时触发
on:
  push:
    branches:
      - main

# 工作流
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 运行环境

    steps:
      # 拉代码
      - name: Checkout code
        uses: actions/checkout@v1

      # 下载node，我这里指定了15.x，这个版本可随意，高于dumi规定的node版本即可
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 16.x

      # 打包代码
      - name: Build Project
        run: |
          npm install
          npm run docs:build
      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      # 部署到github
      - name: Deploy to Github
        uses: crazy-max/ghaction-github-pages@v2
        env:
          GITHUB_TOKEN: ${{ secrets.ACTION_SECERT }}
        with:
          # 部署到 s-pages 分支
          target_branch: gh-pages # 打包的内容放到gh-pages分支下
          # 部署目录的默认输出目录
          build_dir: docs-dist
  1. 推送main分支代码到github仓库，打开github的action，看到流水线已经开始执行，但是会打包失败，我们看到报错信息会发现是，打包的内容会放gh-pages这个粉之下，但是此时在虚拟机中并不能活去github的权限，所以我们需要吧这个权限开发给action。

202305061808457.png

  1. 在配置中需要开启有关workflow的所有权限。

202305061811596.png

202305061812301.png

  1. 如果仍然不行需要设置token
在job中加入GITHUB_TOKEN
env:
          GITHUB_TOKEN: ${{ secrets.ACTION_SECERT }}

在项目的setting中设置${{ secrets.ACTION_SECERT }}

点击 new repository secret 名称跟env中保持一致，值为你的token。

202305061814850.png

  1. 重新推送分支到仓库

202305062302526.png

  1. 设置github pages

    因为我们的ci教程是把 docs-dist 的产物放在了gh-pages这个分支，点击上边给我们的链接就可以访问到， internationsi.github.io/sqlG/

202305062304885.png

可能遇到问题

1. 部署上github page 打开链接会发现报404

202304301507216.png

错误的地址 与 正确的地址

发现我们正好差了一个我们的项目名称，应该是打包的地址发生了问题

修改正确的打包地址

查看dumi的文档配置项

  • publicPath 配置 webpack 的 publicPath。
  • base 要在非根目录下部署 dumi 项目时，你可以使用 base 配置。

改造为我们项目的配置项

参考地址为: github.com/Internation…

彩蛋

后续会分享如何发布到npm包，以及项目中如何使用调试。

sqlG是为数据库相关的组件，b端业务会用到，请关注我会持续更新的呀。

github地址：github.com/Internation…

喜欢的话，可以点个star呀🌟

avatar
文章
阅读
粉丝