前端工程化之多个项目如何同时高效管理 — monorepo

2023-10-30 21:48

本文主要是介绍前端工程化之多个项目如何同时高效管理 — monorepo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

monorepo 不仅限于前端,但此篇博文只谈前端。

是什么

wikipedia: In version control systems, a monorepo (“mono” meaning ‘single’ and “repo” being short for ‘repository’) is a software development strategy where code for many projects is stored in the same repository.

翻译过来就是:在版本控制系统中,monorepo 是一种软件开发策略,其中许多项目的代码存储在同一存储库中。

为什么

在公司内,如果项目较多,每一个项目都会有一个Git仓库,就会导致新来的员工每一次更改项目的时候都需要从 Git 仓库上面拉一份代码下来比较麻烦。

那如果将所有的项目放在一个仓库一起管理呢?这就是 monorepo。

优点

  1. 对依赖统一进行管理。
  2. 可以抽取逻辑维护公共库。
  3. 所有项目统一配置相同的工程配置。

缺点

  1. 需要有比较严格的 CR 规范。
  2. Git 权限管理难以控制。
  3. 版本控制比较麻烦

项目都需要规范的流程。

怎么做

目前来说,前端算是有两种比较常见的对 monorepo 的方案:

  1. lerna.js
  2. yarn workspace

当然,它们也可以同时使用。

yarn workspaces

它允许设置多个包,即只需运行一次 yarn 安装即可一次性安装所有包。

package.json文件中添加以下内容

{"private": true,"workspaces": ["workspace-a", "workspace-b"]
}
禁止使用

.yarnrc 文件中添加:

workspaces-experimental false

learn.js

Github 仓库在:https://github.com/lerna/lerna

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Lerna 是一个使用 git 和 npm 优化管理多包存储库的工作流程的工具。

需要注意的是:lerna 只是一个优化工作流程的工具,并不是一个部署工具。

安装
# 新建一个项目
mkdir lerna-demo && cd lerna-demo# 初始化项目
npm init -y# 安装 lerna
yarn add lerna -D# 初始化 lerna 的项目
npx lerna init

此时一个最基本的 lerna 项目算是完成了。

(记得添加 .gitignore )

使用

上述的命令完成之后,现在项目的文件目录:

在这里插入图片描述

更改一下 package.json 在其中加一个字段:

{"private": true,// ...
}

由于我们管理的是子项目,一般不对父项目进行发布处理,所以将 private 设置为 true

然后在 packages 目录中新建项目即可。

lerna 会自动检测到 packages 里面的项目进行管理。

packages 目录中的项目需要注意一件事情:

  • package.json 的 name 字段需要和文件夹的名称相同。
命令
  • lerna init: 初始化
  • learn list: 列出现在管理的项目
  • lerna diff: 列出最近一次 release 的区别
  • lerna change: 更改了哪些 package
  • lerna bootstrap: 安装依赖并且链接任何交叉依赖项
  • lerna clean: 清理所有依赖项
  • lerna exec: 在每个 package 执行命令
  • lerna run: 在包含 npm script 中的每个 package 执行 npm script
  • lerna import: 将 package 导入到具有提交历史记录的 monorepo 中
  • lerna link: 将相互依赖的所有 package 符号链接在一起

同时使用

lernayarn workspace 可以同时使用

lerna.json 添加:

{"packages": ["packages/*"],"version": "0.0.0","npmClient": "yarn","useWorkspaces": true
}

然后在 package.json 添加:

{// ..."private": true,"workspaces": ["packages/*"]
}
区别

yarn workspace 中有这么一段:

Yarn’s workspaces are the low-level primitives that tools like Lerna can (and do!) use. They will never try to support the high-level feature that Lerna offers, but by implementing the core logic of the resolution and linking steps inside Yarn itself we hope to enable new usages and improve performance.

这个就是区别

参考

wikipedia Monorepo: https://en.wikipedia.org/wiki/Monorepo

yarn workspace: https://classic.yarnpkg.com/en/docs/workspaces

lerna github: https://github.com/lerna/lerna

这篇关于前端工程化之多个项目如何同时高效管理 — monorepo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/310779

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础(单文件 YAML 版)(一)配置原理与优势(二)实操示例二、多环境开发多文件版

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

Redis实现高效内存管理的示例代码

《Redis实现高效内存管理的示例代码》Redis内存管理是其核心功能之一,为了高效地利用内存,Redis采用了多种技术和策略,如优化的数据结构、内存分配策略、内存回收、数据压缩等,下面就来详细的介绍... 目录1. 内存分配策略jemalloc 的使用2. 数据压缩和编码ziplist示例代码3. 优化的

SpringBoot集成XXL-JOB实现任务管理全流程

《SpringBoot集成XXL-JOB实现任务管理全流程》XXL-JOB是一款轻量级分布式任务调度平台,功能丰富、界面简洁、易于扩展,本文介绍如何通过SpringBoot项目,使用RestTempl... 目录一、前言二、项目结构简述三、Maven 依赖四、Controller 代码详解五、Service

深入解析C++ 中std::map内存管理

《深入解析C++中std::map内存管理》文章详解C++std::map内存管理,指出clear()仅删除元素可能不释放底层内存,建议用swap()与空map交换以彻底释放,针对指针类型需手动de... 目录1️、基本清空std::map2️、使用 swap 彻底释放内存3️、map 中存储指针类型的对象