nodejs项目Monorepo模式的基础操作

简单说明

Monorepo(一仓多包),主要是指nodejs环境下的项目,简单说就是在一个git代码仓库下,把项目拆分为多个package,可以分别开发但又互相协作。

举例

一个nodejs环境下的全站项目,需要前后端分离,这很自然的就会产生一个情况,前后端后使用一些共同的定义,比如复杂的接口参数。这时,把这些接口参数的定义,放到一个公共的地方,就是一个很自然很合理的做法。这就是Monorepo的一个基础使用场景。 技术上,Monorepo需要使用pnpm的workspace。

项目搭建过程

shell 复制代码
// 首先全局安装pnpm
npm install -g pnpm

// 创建项目基本目录
mkdir prj_root
// 在项目根目录下init
pnpm init

// 如果确定的话,可以先安装一些公用的包在根目录 比如vite
pnpm add vite -w
pnpm add -D typescript -w
pnpm add -D @types/node -w

// 创建tsconfig
pnpm tsc --init

// 创建pnpm的workspace管理文件
touch pnpm-workspace.yaml

pnpm-workspace.yaml中写入

yaml 复制代码
packages:
    - 'packages/*'

下面进行子包的操作

共享库 shared

shell 复制代码
// 创建packages目录,在其中进行多包的操作
cd prj_root && mkdir packages

// 先创建共享库
cd packages && mkdir shared && pnpm init && pnpm tsc --init

// 创建 src/index.ts
// 先写一个简单的interface 代码不贴了
    
// 

后端 backend

shell 复制代码
cd packages && mkdir backend && pnpm init && pnpm tsc --init
 

子包的tsconfig要继承根目录的tsconfig

json 复制代码
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

添加共享包

shell 复制代码
// 通过workspace方式添加
pnpm add @agent4/shared@workspace:*

前端frontend

shell 复制代码
// 前端子包操作
相关推荐
小码哥_常2 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮4 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀5 小时前
Vue插槽
前端·javascript·vue.js
qq_448011166 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan6 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352906 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝7 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing038 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel8 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放8 小时前
Python基础语法练习题(73)
java·前端·python