umi + monorepo实践

为何需要monorepo?

项目背景

目前负责的企微端的应用有三个:

  1. 策略分享:手机端、PC端使用
  2. 单向视频审核:PC端使用
  3. 资配报告:手机端使用

三个项目的相同点:

  1. 后端接口域名相同
  2. 企微的JS-SDK配置基本相同
  3. 希望可以共用Jenkins部署脚本,减少部署脚本的工作量

不同点:

  1. 界面样式不同,有的给PC用,单位是px;有的给手机端用,单位px转为rem;
  2. 所属不同的小应用,项目的关联性不大。

解决方案

1.杂糅在一起,用路由区分

原本采用的方式是将三个项目分成三个目录,写在同一个umi项目中,好处是git仓库只有一个,打包部署方便,坏处是耦合性太高,后期横向扩展受限,不敢轻易公共方法。

2.将公共组件提取出来,项目独立开发

使用dumi开发公共组件库,三个项目独立开发,这样就有4个git仓库,后期随着应用的增加,git仓库随之增加,每个仓库都有node_modules,占用的硬盘也更大。

3.monorepo

将三个项目使用monorepo 的方式整合在一起,好处是只有一个git仓库,pnpm组织的依赖可以减少硬盘占用,项目间可以公用组件或者单独使用自己的组件,灵活度更高。坏处是git仓库权限管理不够细致,多人开发可以看到所有项目。

构建 Monorepo 项目

1.安装pnpm

在使用 monorepo 管理项目时,pnpm 是一个优秀的选择,它有更快的安装速度和更少的磁盘空间占用,能够更好地处理多个项目之间的依赖关系。全局安装 pnpm

npm install pnpm -g

2.创建 monorepo 仓库:

mkdir qw-repo && cd qw-remp
pnpm init

3.在根目录下添加 pnpm-workspace.yaml 文件,告诉 pnpm 哪些目录是工作区,并在安装依赖时将它们链接到一起。

packages:
  - 'packages/**'

4.添加子项目:

mkdir packages && cd packages

# pkg-a
mkdir pkg-a && cd pkg-a
pnpm init

# pkg-b
mkdir ../pkg-b && cd ../pkg-b
pnpm init

5.安装依赖:

# 全局安装 -w: --workspace-root
pnpm add typescript -D -w

# 局部安装
pnpm add typescript -D --filter pkg-a

# 互相安装
pnpm add pkg-a -D --workspace --filter pkg-b

6.安装umi及其他依赖

pnpm add umi -w
pnpm add @types/react-dom -D -w
pnpm add @types/react -D -w
pnpm add typescript -D -w

7.初始化子项目

为了测试,暂时将官方默认的项目复制到子项目中:

复制.umirc.ts、pages、layouts等文件和目录;

修改package.json,添加scripts:

  "scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev",
  },

执行pnpm run start即可单独跑子项目。

8.批量build

在父项目的package.json中添加:

  "scripts": {
    "build": "pnpm -r --filter=./packages/* run build"
  },

在根目录运行pnpm run build将执行 packages 目录下所有具有 build 命令的包。

9.引用外部公用函数

在根目录新建/utils/index.tsx:

export const testFunc = () => {
    alert('123')
}

子项目中引用:

import {testFunc} from "../../../utils";

    useEffect(() => {
        testFunc()
    }, [])

问题

1.无法识别从umi导入的组件

import {Link, Outlet} from "umi"; //编译器报错:无法解析符号 'Link', 'Outlet'

改为:

import {Outlet} from "@@/exports";

你可能感兴趣的:(前端,React,react.js,前端,javascript,typescript)