一、背景
最近新增了好几个h5端的项目，有些场景相似度很高，于是我来重复造轮子了（bushi）。
- 写到第二个h5端项目的时候，遇到了尴尬的场面 -- 代码复制粘贴；
- 想试一下亲手搭建一个公共组件库，于是调研了市场上的一些一站式组件开发方案。
其实工作中封装组件的场景蛮多的，只不过大多数都是封装到项目代码component里了，跨项目的时候就又要重新写一遍代码，我主要抽离了我用的比较多的一段代码。
下面主要总结的内容有：
- 抽离的逻辑有哪些；
- 构建组件包的完整方案，准备项目、发布组件、组件文档编写、文档站点自动部署；
直接先上完成的Demo站点：
二、抽离逻辑
- Toast、确认框中常用的逻辑：挂载一个节点到跟节点下；
- 输入验证码的组件；
三、构建组件包方案
- 因为常用的技术栈react + ts，组件就直接用dumi脚手架开发了，里面包含了组件的构建、发布、集成了文档书写，很方便；
- dumi v2提供的包发布功能，在调用npm publish前会自动调用father build，默认构建了esm包到dist下，publish命令根据package.json中的files字段将这个dist目录内容发布到npm服务器上，就是一个npm包了；
- 文档构建命令docs:build，默认生成静态文档资源到docs-dist下；
框架提供的能力，到这里已经完成了组件包的发布、文档自动生成，最后需要将生成的静态文档部署到git-page上。
四、部署静态文档
- 在github项目Actions中新建workflow，选择Publish Node.js Package to GitHub Packages
- 下面的是workflow文件内容
name: dumi book test
# 只有在master分支发生push事件时触发
on:
push:
branches:
- master
# 工作流
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 运行环境
steps:
# 拉代码
- name: Checkout code
uses: actions/checkout@v1
- name: Deploy to Github
uses: JamesIves/github-pages-deploy-action@4.0.0
with:
branch: build # 打包的内容放到build分支下
folder: docs-dist
大体逻辑是，在push到master分支后，github-pages-deploy-action将master分支的docs-dist目录推送到build分支上。
其中，docs-dist目录就是上面docs:build命令产生的静态文件文档，推送到build分支上是为了使用git-pages功能部署静态站点
- 在github项目对应的setting中设置git-page配置，选择build分支根目录为站点内容，然后就可以访问文档站点了。
五、问题记录
- 部署完成后在访问文档站点时会遇到404的问题，发现是构建文档的请求路径不对，需要在项目中配置一下base和publicPath
- 如果是发布到npm官方仓库中的包，使用国内镜像源无法立即获取到，可能需要手动同步。
淘宝镜像同步网址
