前端MonoRepo实战:pnpm+nx搭建MonoRepo项目

简介: 之前大多数是理论知识,能让我们知道pnpm 和nx 是什么,但是具体要到项目实战就有点懵,不知道从而下手,下面我们就一步步开始搭建pnpm+nx的Monorepo仓库。

背景


之前有写过几篇关于Monorepo的文章,具体如下:

再次复习一下MonoRepo的概念:

Monorepo是包含多个不同项目的单一存储库,且不同项目之间具有明确定义的关系。

之前大多数是理论知识,能让我们知道pnpmnx 是什么,但是具体要到项目实战就有点懵,不知道从而下手,下面我们就一步步开始搭建pnpm+nx的Monorepo仓库。


PS:这里将会从已有项目中去开始踩坑,这里用的是之前做一个node-gptcommit命令行工具+一个chrome插件,将两个项目放到一个Monorepo仓库去管理。

项目初始化


第一步,项目结构调整


先来看看原先node-gptcommit 项目结构:

node-gptcommit
├── bin
|  └── ngptcommit.js
├── dist
|  ├── ...
├── src
|  ├── ...
├── test
|  ├── ...
├── jest.config.js
├── babel.config.js
├── package.json
├── pnpm-lock.yaml
├── rollup.config.ts
├── tsconfig.json
└── tslint.json
├── README.en.md
├── README.md

再看一下node-gptcommit-chrome项目的目录结构:

node-gptcommit-chrome
├── dist
|  ├── ...
├── src
|  ├── ...
├── test
|  ├── ...
├── index.html
├── package.json
├── public
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
├── README.md

接下来我们把项目结构做一下调整,将两个项目的代码挪到packages目录下,同时在新项目中初始化npm init ,大概结构如下:

node-gptcommit
├── apps # 应用层
|  ├── chrome-extension # chrome插件
|  |  ├── ...
|  └── node-cli # 命令行工具
|     ├── ...
├── libs # 封装好的lib库
|  └── summarize # 总结AI客户端 
|     ├── ...
├── README.md
├── package.json

第二步,项目初始化


前提条件准备:

  • 安装全局pnpm
  • 升级node版本到16.19.0+,这里可以通过pnpm去管理node版本
# 先安装全局pnpm 后续需要根据pnpm + workplace去管理
npm install pnpm -g
# 切换node版本
pnpm env use --global 16 

2.1 创建pnpm workplace


1.新建pnpm workplace工作空间文件pnpm-workspace.yaml ,具体如下:

packages:
  # 会将packages下面归纳给到pnpm工作空间进行管理
  - 'packages/*'
  # 排除下面的目录
  - '!**/test/**'

2.子项目互相依赖的时候,可以通过workplace: 协议去设置依赖,支持一下几种写法:

  • “npm_name”: “workplace: *”  所有版本都依赖本地工作空间
  • “npm_name”: “workplace: npm_name@1.0.0” 指定版本写法
  • “npm_name”: “workplace: ../npm_name”  相对路径写法

因此apps 中的应用层加入对公共库libs的依赖,如在apps/node-cli

{
  ...
  "dependencies": {
    "@node-gptcommit/summarize": "workplace: *",
    ...
  }
  ...
}

3.子项目中需要对package.json 中的scripts 中做统一管理,如下:

{
  ...
  "scripts": {
    "build": "xxx", //按照各自的项目填写对应的构建脚本
    "dev": "xxx",
    "test": "xxx"
  },
  ...
}

2.2 引入nx,实现按序打包


1.全局安装和在项目根目录下安装 nx

# 全局安装方便后面调试项目使用
pnpm install nx -g
# 项目nx初始化 注意目录不能已经安装nx或者有nx.json
npx nx@latest init
# 官网里 npx nx@latest init 一直有问题,回头去定位看看

nxmonorepo 架构中里主要解决几个问题:

  • 解决项目中互相依赖问题,就是构建顺序问题,其任务流有点像管道的概念
  • 解决项目中打包缓存问题,比如:一些公共包没有多大变动,就不需要再次打包
  • 提供一些快捷工具快速引入一个子项目或公共包


还需要转变一个观点:

重要提示:nx会接手项目的所有打包流程,因此所有相关的命令都由nx进行触发


2.自动生成的 nx.json 解析认知 ,

{
  "workspaceLayout": { // 工作空间配置
      "appsDir": "apps", // 应用层文件夹
      "libsDir": "libs" // 公共库文件夹
  },
  "targetDefaults": { // 统一的配置项,用于覆盖每个项目中的project.json配置
    "build": { // 统一构建选项
      "dependsOn": ["^build"], // 当构建的时会自动将依赖的其他子项目也进行构建build
      "inputs": ["production", "^production"] // 构建
    }
  },
  "tasksRunnerOptions": { // 任务执行器选项
    "default": { // 默认的任务执行器的选项
      "runner": "nx/tasks-runners/default", // 任务执行器
      "options": {
        "parallel": 5, // 构建并发线程个数
        "cacheableOperations": ["build", "lint", "test"] // 可缓存的操作
      }
    }
  }
}

nx.json 主要用来配置子项目的构建顺序和控制缓存,比如:

  • 构建顺序:在项目中apps进行build操作时候会依赖libs项目中的build ,就可以在targetDefaults中配置"dependsOn": ["^build"],举个例子:
  • apps的子项目node-cli在运行build操作
  • 会提前将依赖的libs中的summarize子项目也进行build
  • 控制缓存:提高构建速度,利用缓存,但是有时候我们并不需要每个构建命令都去缓存,这个时候就可以用tasksRunnerOptions中的cacheableOperations去控制

nx.json 的其他详细配置可以到官网中查看nx.json


3.调整根目录package.jsonscripts,后续将采用nx去进行分发构建任务:

{
  ...
  "scripts": {
    "build": "nx run-many --target=build",
    "dev": "nx run-many --target=dev",
    "test": "nx run-many --target=test"
  },
  ...
}

4.nx一些命令工具,如使用nx graph 可以看到Monorepo中子项目相互依赖情况,如下图所示:

9e8894402cf6b31b8d137354a14ac0e.png

更多使用命令,可以到官网查看:nx命令脚本

总结


到了这里,我们完成Monorepo基本架构的搭建,后续工作就依据不同的业务或代码进行重设计代码结构。


Monorepo架构有个很明显好处,就当你的项目需要新增一个子项目或者依据现有的功能进行剥离成功公共组件,将会很轻松就实现。比如说,当我的node-gptcommit需要新增一个桌面端,那么我就可以根据现有的libs库快速开发完成。


pnpm+nx 搭建Monorepo项目中,我们可以学习到几个点:

  • 使用pnpm 替代yarnnpm 管理node_modules ,不仅快,而且会比较稳定,因为它不允许代码引入一些未在package.json使用的npm
  • 使用pnpm 同时支持一些libs 被其他apps的子应用依赖,如: "@node-gptcommit/git-utils": "workplace: *”
  • nx 在使用上会需要一些门槛,尤其需要理解其中几个点:
  • 第一,子项目互相依赖,nx可以在build构建的时候将另外一个包也同时build构建
  • 第二,nx会取代掉我们平时在根目录使用yarn buildnpm build 的习惯,而是采用nx build
  • 第三,nx 提供一些常用的命令行,如:nx graph 能让我们快速解决Monorepo架构常见的依赖问题


本博文项目Github源码地址: node-gptcommit

参考资料


QBorfy
+关注
目录
打赏
0
0
0
0
4
分享
相关文章
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
119 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
81 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    90
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    14
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    44
  • 5
    详解智能编码在前端研发的创新应用
    16
  • 6
    巧用通义灵码,提升前端研发效率
    30
  • 7
    智能编码在前端研发的创新应用
    40
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    50
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    119
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等