前端工程化之多个项目如何同时高效管理 — 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基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA,点击运行按钮,运行结束,但控制台未出现http://

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时

C语言小项目实战之通讯录功能

《C语言小项目实战之通讯录功能》:本文主要介绍如何设计和实现一个简单的通讯录管理系统,包括联系人信息的存储、增加、删除、查找、修改和排序等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录功能介绍:添加联系人模块显示联系人模块删除联系人模块查找联系人模块修改联系人模块排序联系人模块源代码如下

使用Python实现高效的端口扫描器

《使用Python实现高效的端口扫描器》在网络安全领域,端口扫描是一项基本而重要的技能,通过端口扫描,可以发现目标主机上开放的服务和端口,这对于安全评估、渗透测试等有着不可忽视的作用,本文将介绍如何使... 目录1. 端口扫描的基本原理2. 使用python实现端口扫描2.1 安装必要的库2.2 编写端口扫

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》:本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI