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";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/616575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux操作系统----实用工具Git(配实操图)

绪论​ “针对问题 解决问题 针对问题!”,本章主要讲解的是Git是什么以及Git的如何搭建仓库和如何在Linux环境下通过指令的形式提交自己的代码到远程仓库。 话不多说安全带系好,发车啦(建议电脑观看)。 1.Git的来源以…

Java编程思想3

文章目录 一、访问权限控制1. 目的2. 访问权限修饰符:3.私有构造器 二、复用类1. 组合(Composition):2. 继承(Inheritance):3. 基类的初始化:4. 在组合与继承之间选择:使…

vulnhub靶场之DC-5

一.环境搭建 1.靶场描述 DC-5 is another purposely built vulnerable lab with the intent of gaining experience in the world of penetration testing. The plan was for DC-5 to kick it up a notch, so this might not be great for beginners, but should be ok for p…

el-select 单选时,选择后输入框的is-focus状态并没有取消

前两天在封装组件的时候,发现el-select 单选时,选择后输入框的is-focus状态并没有取消,需要手动点其它地方才会取消,于是想着找找为什么 一、通过调试源码发现,输入框在点击选项后触发blur,紧接着又触发了…

STM32学习笔记二十一:WS2812制作像素游戏屏-飞行射击游戏(11)探索游戏脚本

还记得上次在第十七章中为BOSS创建的路径动画吧。我们写了一大坨的代码来描述BOSS的运动路径,但凡是写过几年代码的人都不会干出这样的事情。-_-! 没办法,谁叫那时候还没有脚本呢。这章就来补齐这块短板。 脚本属于配置化的一种,你可以把脚…

大模型学习与实践笔记(四)

一、大模型开发范式 RAG(Retrieval Augmented Generation)检索增强生成,即大模型LLM在回答问题或生成文本时,会先从大量的文档中检索出相关信息,然后基于这些检索出的信息进行回答或生成文本,从而可以提高回…

【实用技巧】Steam Wallpaper Engine 壁纸引擎向手机导入壁纸方法

一、内容简介 本文介绍如何使用电脑上的 Wallpaper Engine (Steam 平台中的壁纸引擎)向安卓手机导入并使用壁纸。 二、所需原材料 安卓手机(以笔者使用的华为荣耀50为例)、安装有Steam以及Wallpaper Engine的电脑 三、导入方法…

c++最值查找

目录 min和max函数 min_element和max_element 例 nth_element函数 例 例题 题目描述 输入描述 输出描述 解 min和max函数 只能传入两个值或一个列表 时间复杂度为O(1),数组O(n),n为元素个数 min_element和max_element min_element(st,ed)返回地址[st,…

Rust 最新版1.75.0升级记

升级方法 稳定版 C:\>rustup update stable info: syncing channel updates for stable-x86_64-pc-windows-msvc info: latest update on 2023-12-28, rust version 1.75.0 (82e1608df 2023-12-21) info: downloading component cargo 5.9 MiB / 5.9 MiB (100 %) 3.…

宏集案例丨宏集PC Runtime软件助推食品行业生产线数字化革新

来源:宏集科技 工业物联网 宏集案例丨宏集PC Runtime软件助推食品行业生产线数字化革新 原文链接:https://mp.weixin.qq.com/s/DwzVzifUiidNr-FT3Zfzpg 欢迎关注虹科,为您提供最新资讯! 01 前言 近年来,中国食品行业…

微服务治理:为什么要分析微服务的依赖关系?

在微服务架构中,单个服务相互协作以交付功能。这些协作会在服务之间形成依赖关系,其中一个服务依靠另一个服务来完成自己的任务。虽然依赖关系使功能得以实现,但不受控制的依赖关系可能会导致一系列挑战: 复杂性: 错综复杂的依赖…

html+css实现子元素完全居中常见方案

详细过程 查看公众号文章 htmlcss实现子元素完全居中常见方案 获取更多内容,请关注微信公众号。搜索“码圈小橙子”,或扫描下方二维码获取关注

FFmpeg编程录制音频(Mac OS)

之前我们使用FFmpeg命令行工具进行了简单的音视频操作,这次在Mac OS环境下编写代码实现简单的音频录制功能。 FFmpeg命令行音频录制 首先回顾一下Mac OS环境下简单的音频录制命令行实现: ffmpeg -f avfoundation -i ":0" -t 20 -acodec pcm…

opencv拉流出现missing picture in access unit with size 4错误解决

0、应用场景问题 我们使用opencv作为拉流客户端,获取画面后进行图像处理并推流(使用ffmpeg库)。 opencv解码同样使用ffmpeg库。 我们要求opencv能根据业务不断进行拉流操作,等效的逻辑代码如下: while(1) {printf(&…

MATLAB最小二乘法曲线拟合及消除多项式趋势项代码实例

1.最小二乘法拟合基本概念 MATLAB最小二乘法曲线拟合及消除多项式趋势项代码实例 最小二乘法是一种数学优化技术,它通过最小化误差的平方和寻找数据的最佳函数匹配。优化是找到最小值或等式的数值解的问题。而线性回归就是要求样本回归函数尽可能好地拟合目标函数值,也就是说…

gazebo模型库目录(国内源)

这个是比较普遍的,一般用途: GitCode - 开发者的代码家园https://gitcode.com/geniusChinaHN/osrf.gazebo_models/tree/master/ambulance这个主要是车辆: car_demo: osrf汽车模型库https://gitee.com/geniuschinahn/car_demo还有这个是以前…

YOLOv6s,map值打印成两位小数(原本是显示0.538,变成显示为53.79)

显示结果 更改前: 更改后: 方法 将tools/eval.py中的--do_pr_metric后面改为defaultTrue即可打印出map值原本是显示0.538,变成显示为53.79,方法为👇 在YOLOv6-main/yolov6/core/evaler.py中做如下更改&#xff1a…

对回调函数的各种讲解说明

有没有跟我师弟一样的童靴~,学习和使用ROS节点时,对其中的callback函数一直摸不着头脑的,以下这么多回调函数的讲解,挨个看,你总会懂的O.o 回调函数怎么调用,如何定义回调函数: 回调函数怎么调用,如何定义…

最大公共子串

解题思路: 解题代码: UP主运用的方法很巧妙。厉害。

IPv6路由协议----BGP4+

BGP基本概念 边界网关协议BGP(Border Gateway Protocol)是一种实现自治系统AS(Autonomous System)之间的路由可达,并选择最佳路由的距离矢量路由协议。 MP-BGP是对BGP4进行了扩展达到在不同网络中应用的目的,BGP4原有的消息机制和路由机制并没有改变。MP-BGP在IPv6单播网…