首页 > 其他分享 >vue3 + pnpm 打造一个 monorepo 项目

vue3 + pnpm 打造一个 monorepo 项目

时间:2024-12-02 10:27:02浏览次数:6  
标签:vue package vue3 json 依赖 pnpm monorepo

Monorepo 和 Multirepo

单一仓库(Monorepo)架构,可以理解为:利用单一仓库来管理多个packages的一种策略或手段;与其相对的是多仓库(Multirepo)架构

Monorepo 目录中除了会有公共的package.json依赖以外,在每个sub-package子包下面,也会有其特有的package.json依赖。

兄弟模块之间可以通过模块 package.json 定义的 name 相互引用,保证模块之间的独立性

# monorepo目录结构
monorepo-demo
├── packages
│   ├─ module-a
│   │  ├─ src             # 模块 a 的源码
│   │  ├─ node_modules    # 模块 a 的 node_modules
│   │  └─ package.json    # 仅模块 a 的依赖
│   └─ module-b
│      ├─ src             # 模块 b 的源码
│      └─ package.json    # 仅模块 b 的依赖
├── .eslintrc             # 配置文件,对整个项目生效
├── node_modules          # 所有子包公共的 node_modules
└── package.json          # 所有子包公共的依赖

Multirepo 更倾向与在项目制中,将一个个项目使用不同的仓库进行隔离,每一个项目下使用独有的package.json来管理依赖

# multirepo-a目录结构
multirepo-a
├── src
├── .eslintrc                
├── node_modules             
└── package.json   

# multirepo-b目录结构
multirepo-b
├── src
├── .eslintrc                
├── node_modules             
└── package.json  

Monorepo 工具

在采用 Monorepo(单一仓库)架构的软件开发中,工具的选择是至关重要的。合适的 Monorepo 工具能够帮助团队更高效地管理大规模代码库、提升协同开发体验以及优化构建和部署流程。

直至 2024 年,目前在前端界比较流行的 Monorepo 工具有 Pnpm WorkspacesYarn Workspacesnpm WorkspacesRush
TurborepoLernaYalc、和 Nx

强烈推荐使用Pnpm Workspaces 作为 Monorepo 项目的依赖管理工具

标签:vue,package,vue3,json,依赖,pnpm,monorepo
From: https://www.cnblogs.com/burc/p/18568326

相关文章

  • vue3 原生 JS canvas 封装获取验证码组件
    前言由于开发中,产品有需求,要求开发一个可以自定义字符的随机获取4个字符的验证码组件,然后我就仿照流行的验证码功能写了一个 运行效果HTML<template><!--验证码画布容器,点击后会触发验证码刷新--><spanclass="s-canvas"@click="changeCode"><canvas......
  • vue3 数字自增长组件
    前言当做数字大屏的时候,就需要做一个数字传入后,可以自增长的组件,可以根据数据大小算每一次跳动的数字运行效果 会从0开始自动增加到9000(录屏好麻烦)HTML<template><divclass="counter"><div:style="{color:fontColor,fontSize:fontSize}"><span......
  • 3.vue3+openlayers加载Mapbox地图
    1.注册Mapbox账户访问Mapbox官网,并点击右上角的SignUp按钮,创建一个新的账户。如果你已有Mapbox账户,可以直接登录。2.创建一个Mapbox项目登录后,进入Mapbox的AccountDashboard页面。在页面上,你会看到一个Createanewtoken或者Accesstokens的按钮。点......
  • vue3实现自定义导航菜单
    一、创建项目    1.打开HBuilderX图1    2.新建一个空项目        文件->新建->项目->uni-app        填写项目名称:vue3demo        选择项目存放目录:D:/HBuilderProjects        一定要注意vue的版本,当前选择的版......
  • uni-app vue3 获取 package.json 自定义环境变量
    一、初始化项目 二、添加 package.json 文件(必须)注意:文件里面不要写备注{ "uni-app":{ "scripts":{ "dev":{ "title":"开发版", "env":{ "ENV_TYPE":"dev", "UNI_PLATFORM&q......
  • SpringBoot3+Vue3+NaiveUI主流前端分离开发框架 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈实现......
  • SpringBoot3+Vue3+NaiveUI项目实例源码 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈实现......
  • vue3自定义指令实现截图
    依赖:•使用html2canvas(需要先安装:npminstallhtml2canvas)。绑定事件:•在目标DOM上绑定click事件。截图逻辑:•点击后调用html2canvas截取目标元素的截图。•使用Canvas的toDataURL()方法生成Base64图片。保存文件:•创建一个a标签,通过downloa......
  • Vue3+Element plus 实现表格可编辑
     <template>  <div>   <el-buttontype="primary"@click="handleAdd">    新增   </el-button>   <el-buttontype="primary"@click="handleAdd10">    新增10个点表   &l......
  • 手动实现vue3的select下拉框的滚动加载和虚拟滚动,简单易懂
    首先,滚动加载和虚拟滚动都是为了解决数据量大的渲染性能问题,但是也有区别,滚动加载并没有从根本上解决问题,只是滚动到可视区域底部动态加载,二虚拟滚动是永远只渲染固定数量(通常是可视区域内)的所以可以从根本上解决这种性能问题。如果只想了解滚动加载只看第一部分即可。这两种技......