React进阶之前端业务Hooks库（二）

1. 完整的CI/CD的过程如何去实现
2. 基于state开发的时候，和状态相关的hooks如何去做

Action

基于git action做的，其实是devops(开发运维)中的一个环节，主要是Ops环节，开发完成到发布的过程要怎么做
现在的开发部署不需要从0到1部署一个空的真正的集群，或者空的服务器，直接使用现成的服务器

今天的项目借助于GitHub(也可以用gitlab，Jenkins，docker compose)去做的，注重的是通过什么方式去进行构建/部署/发布流程

xx.yml -> 命令行的缩进表达序列化的展示，类似json，只是一种文档后缀的格式，可视化表达的功能

• .github
  • workflows 针对于github中创建这样的目录，目录中对应的文件格式都是 -> .yml 进行git action部署的一个格式
    • deploy.yml
    • test.yml

结合在发布流程中，当我们触发某个钩子函数，一般称之为hook，结合发布的动作
针对git的workflow，git的阶段，commit,push,pull,PR,不同的阶段要触发不同的节点，这个节点就是我们对应的钩子
针对触发的节点上，就能够进行自定义功能，自定义事件

deploy.yml

对于我们而言要自动化发布，要怎么做？
在hooks开发完后要进行打包，打包后要进行发布

1. 安装

pnpm run init

安装完成后

2. 需要将docs文件，这里是dumi做的文件发布
   还需要将打包产物publish到npm上
   push 到 master上

• on
  • master
    …

vscode安装 github actions插件

这个能力：

基于github workflow的能力，跳转到指定的功能上

则可以监测记录的分支
jobs:类似jest的子工作
runs-on：基于github免费的服务器
permissions：开发时候要用到

gh-pages：部署的站点的分支


则可以获得官方提供的免费域名，

name: Build and Deploy
# 监听动作
on:  #github aciton的on
  push: #push一个commit或tag时候
    branches: #能够检测到master分支
      - master
jobs: #类似jest一系列的子工作
  build-and-deploy: #构建和部署 
    runs-on: ubuntu-latest #基于github上提供的免费的服务器，这里使用的是最新的ubuntu机器
    permissions: #开发时候需要用到
      contents: write #提供一个写文件的，因为要把内容写到分支中去
    steps: # 针对build-and-deploy的步骤
      - name: Checkout #要去使用git actions功能模块
        uses: actions/checkout@v2.3.1

      - name: Lock npm version #安装指定的node版本
        uses: actions/setup-node@v3
        with:
          node-version: 16.18.0

      - name: Install and Build #安装和构建，与本地工作一致
        run: |
          npm i -g pnpm
          pnpm run init
          pnpm run build:doc      #也就是dumi build，打包后的dist文件就是最终部署到服务器上的
        env: #node的选项：最大老生代内存的大小为4M，保证执行安装时候不会超出内存堆栈 
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: Deploy #文档部署
        uses: JamesIves/github-pages-deploy-action@4.1.3 #github-pages-deploy-action插件，github提交的一系列的deploy功能
        with:
          BRANCH: gh-pages #部署分支
          FOLDER: dist 
          ACCESS_TOKEN: ${
   {
    secrets.ACCESS_TOKEN }} #github账号提供的密钥

github-pages-deploy-action

设置密钥tokens:

这里添加创建密钥

deploy.yml文件执行的内容：

test.yml

test CI：自动化测试
借助于github的git action做到的

name: Test CI
on:
  push:
    branches: 
      - master 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout  ️
        uses: actions/checkout@v2.3.1

      - name: lock npm version
        uses: actions/setup-node@v3
        with:
          node-version: 16.18.0

      - name: Install and Build
        run: |
          npm i -g pnpm
          pnpm run init
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: test
        run: | #最后执行 run test 
          pnpm run test

test CI：自动化测试
pnpm run test 执行成功后，会有一个对应的回调，如果失败的话，意味着单测失败，一般会发布到线上的环境。先通过master环境打包，打包之后，单测执行失败的话，就不会将docs功能部署到线上。

可以借助于AI功能进行发布npm包，部署环境文件的导出，
豆包，kimi: 使用git action 进行发布的，请提供一个git action文件
编码一个 yaml 文件，用于git actions，用于自动化的jest测试，并且能够使用上一次发布的缓存

作业1：在自己的项目上按照这套流程，自己发布一下

基于 state 的 hooks 方法

自定义hooks，一般是借助 useState,useMemo,useCallback,useEffect 这几个实现的

创建基于state的hooks要使用哪些呢？
这里说的是 通用型的hooks，但在实际开发会有定制化的hooks
比如，要使用：

• usePermissions 获取用户的身份状态，获取用户权限
• useRole 当前用户登录的角色

interface IPermissionsProps{
   
   /** type
    *   page 页面权限
    *   slot 页面模块，按钮
   */  
   type: "page" | "slot";
   /* 对应访问的权限功能 */
   authCode?: string;
}

const useRolePermission=async () => {
   
	return await useRequest(async ()=>{
   
     // session，通过session读取用户登录身份
	 const {
    authCodes=[] } = await api.getPermission(); //返回权限码
	 
	 return authCodes
   })
}

const usePersmissions = (permissionProps:IPermissionsProps)=>{
   
   const {
    type='page' } = permissionProps;
   let hasPermission = false;

   const authCodes=useRolePermission;
	
   return authCodes?autoCodes?.includes(authCode):true;
}

useBoolean

判断用户是或非

packages/hooks/src/useBoolean/index.ts

引用useToggle

import {
    useMemo } from