手把手,教你搭建基于lerna+pnpm构建的monorepo项目

Lerna 是TypeScript/JavaScript 的原始monorepo 工具。它已经存在多年,被数以万计的项目使用,包括 React 和Jest。 它解决了 JavaScript monorepos 的三个最大问题: 1、Lerna 链接了 repo 中的不同项目,因此它们可以相互导入而无需向 NPM 发布任何内容。 2、Lerna 针对任意数量的项目运行一个命令,它以最有效的方式、以正确的顺序执行,并有可能将其分发到多台机器上。 3、Lerna 管理您的发布过程,从版本管理到发布到 NPM,它提供了多种选项以确保可以适应任何工作流程。

许多人印象中lerna好像已经停止维护,但其实不然,lerna实际上目前已经被Nrwl(开源构建系统 Nx 背后的公司)接管,并基于Nx技术进行升级维护。而Nx是一个由前 Google 员工开发的构建系统。 下图是我在使用lerna启动monorepo项目时的截图:

可以看到,lerna已经受到了Nx技术支持,同时,lerna启动的方式为并行启动,理论上可以节省大量启动时间。

下面开始搭建基于lerna+pnpm的monorepo项目:

1.首先,使用npm安装pnpm和lerna:

npm i -g pnpm
npm i -g lerna

2.在需要搭建monorepo项目的文件位置下执行:

lerna init

此时lerna工具会默认使用npm进行项目搭建

3.打开生成好的项目文件夹,删除基于npm生成的依赖文件node_modules

4.手动创建pnpm配置文件pnpm-workspace.yaml 注意,直接使用pnpm init命令的话会报错:

里面就三行代码,用于定义pnpm支持的workspace工作区域,之后在执行pnpm i 安装环境依赖时,可以自动识别工作区域,为工作区域内所有的项目安装依赖。

5.手动创建工作区域文件夹packages和apps

6.搭建演示用的vue项目和组件包、js文件包 项目关系简介 :共三个vue程序,其中vue-main-project作为主程序,负责调用另外两个vue-tools程序,同时,公用组件库和公用js文件库均被打包为npm依赖,安装到根环境(根目录下的)中。完整代码我之后会分享到github或gitee上。

**7.公用组件库和公用js库都需要在其目录下执行 pnpm init 命令,构建npm依赖配置文件(packages.json) 配置文件内部的name属性需要自行修改为较为独特的名称,防止和远程npm仓库的包名重复,导致将远程的npm包一并安装到环境中。

8.将公共组件库和公共js库安装到根环境中,实现其可以被所有项目程序调用的功能。

pnpm i -w my-monorepo-components (-w代表工作区域,这里会使得pnpm自动安装工作区域内所有项目的依赖项)
pnpm i -w my-monorepo-functions

9.修改三个vue项目的配置文件vue.config.js,为它们分别配置不同的端口,防止启动冲突。

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,//关闭语法检查
  devServer: {
    port: 8081 // 第一个子项目使用8081端口
  }
})

10.执行指令,并行启动所有项目:

lerna run serve

可以看到三个vue项目均已成功启动,打开主项目(http://localhost:8080/),可以分别切换两个子项目页面:%25EF%25BC%258C%25E5%258F%25AF%25E4%25BB%25A5%25E5%2588%2586%25E5%2588%25AB%25E5%2588%2587%25E6%258D%25A2%25E4%25B8%25A4%25E4%25B8%25AA%25E5%25AD%2590%25E9%25A1%25B9%25E7%259B%25AE%25E9%25A1%25B5%25E9%259D%25A2%25EF%25BC%259A "http://localhost:8080/)%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%88%86%E5%88%AB%E5%88%87%E6%8D%A2%E4%B8%A4%E4%B8%AA%E5%AD%90%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%EF%BC%9A")

同时由于三个项目是并行启动的关系,子项目也可以通过网址直接访问(http://localhost:8081/http://localhost:8082/),这里就不展示了。%25EF%25BC%258C%25E8%25BF%2599%25E9%2587%258C%25E5%25B0%25B1%25E4%25B8%258D%25E5%25B1%2595%25E7%25A4%25BA%25E4%25BA%2586%25E3%2580%2582 "http://localhost:8082/)%EF%BC%8C%E8%BF%99%E9%87%8C%E5%B0%B1%E4%B8%8D%E5%B1%95%E7%A4%BA%E4%BA%86%E3%80%82")

到此,lerna+pnpm搭建monorepo项目的流程结束,如果存在不足和问题欢迎大家补充!

相关推荐
ks胤墨9 分钟前
远程办公时代macOS访问解决方案:兼顾效率提升与安全防护的实用架构指南
安全·macos·架构
向上的车轮2 小时前
Spring Boot微服务架构(五):一个系统一个微服务是“真微服务架构”?
spring boot·微服务·架构
斯普信专业组5 小时前
RabbitMQ仲裁队列高可用架构解析
分布式·架构·rabbitmq
Lowcode0025 小时前
边缘计算新基建:iVX 轻量生成模块的 ARM 架构突围
arm开发·架构·边缘计算
hstar95277 小时前
三十一、面向对象底层逻辑-SpringMVC九大组件之RequestToViewNameTranslator接口设计哲学
java·spring·设计模式·架构
沛沛老爹9 小时前
云原生技术架构技术探索
云原生·架构·云原生技术架构
jakeswang9 小时前
实时技术对比:SSE vs WebSocket vs Long Polling
后端·架构
沛沛老爹20 小时前
优化 CRM 架构,解锁企业竞争力密码
架构·数字化时代·crm架构·客户关系管理·市场变化·客户满意度
flytalei20 小时前
理解 Kubernetes 的架构与控制平面组件运行机制
平面·架构·kubernetes
zkmall20 小时前
B2C商城架构对比:ZKmall模板商城为何选择 Spring Cloud
spring·spring cloud·架构