不知道怎么搭建monorepo项目? Lerna 8用起来!

前言

monorepo是什么?

正常情况下,我们一个前端项目只会有一个package.json,比如做一个设备管理系统,这个项目只负责实现设备管理系统相关的功能。

但是如果我们需要做公司内部公共库的项目,比如我的公司是comp,

  1. 我需要一个comp-ui项目,存放公司内部封装的常用组件
  2. 我需要一个comp-util项目,存放公司内部常用的公共方法
  3. 我需要一个comp-icon项目,存放公司内部画的图标库。
  4. 我需要一个comp-docs项目,存放该公共库的使用示例文档。
  5. .....

这些项目可能会互相依赖,比如comp-ui要依赖comp-utilcomp-iconcomp-routercomp-docs需要依赖comp-ui

如果每个项目都单独创建一个git仓库管理,那么当comp-util做了修改,就必须先打包升版发布,然后comp-uicomp-docs需要分别更新各自项目的依赖,十分的麻烦。

monorepo就是为了解决这个痛点,将所有的comp-xx项目放在一个仓库管理。

lerna则是解决monorepo项目管理的便捷性,当其中一个子项目更新了之后,不需要更新仓库中其他项目对该子项目的依赖,而是会自动生效!

当项目发版的时候,lerna会对本次有修改的子项目一起升版,并且在git提交使用tag标记,以便于我们以后查看每个版本的代码,如下图所示:

当然,可能有的同学还是会想说,这么麻烦干嘛?我不这么分项目,所有东西放在一个项目里不就得了!

其实完全也可以这么做,无非就是如果其他项目只想用到公共方法comp-util,就不得不把全部依赖引入!

为什么选择lerna

lerna最初是Babel团队内部使用管理monorepo项目,之后开源供社区使用,团队强大,并且许多大型的项目也是使用lerna做管理,比如ReactJest

lerna近期升级到8版本,进一步降低了用户的上手成本,简化了项目管理。

总的来说lerna是一个强大的工具,适用于管理大型JavaScript项目中的多个包,通过其提供的命令和功能,能够简化多包存储库的管理和操作,提高开发效率和代码质量。

开始使用

1. 全局安装

markdown 复制代码
    npm install -g lerna,yarn

lernayarn有着非常好的适配性,所以lerna项目十分推荐使用yarn作为包管理工具。

2. 进入一个空文件夹,执行初始化项目命令

csharp 复制代码
    lerna init

项目初始化完成,并且依赖node_modules已经安装好了!

可以看到项目的初始结构! 由于默认使用的是npm安装依赖,我们可以将package-lock.json删除,执行

  yarn install

将包管理工具切换为yarn,得到如下结构的项目。

打开package.json文件查看,内容如下:

json 复制代码
{
  "name": "root", 
  // 根项目是私有的,并不需要打包发布,仅作为多个子项目包的管理
  "private": true,  
  // 子项目是在packages文件夹下,因为目前一个子项目都没有,所以也没有packages文件夹
  "workspaces": [   
    "packages/*"
  ],
  "dependencies": {},
  "devDependencies": {
    "lerna": "^8.1.2"
  }
}

3. 新增模块

monorepo的项目,推荐使用作用域包的命名方式,也就是@组织名/包名,这样不容易和别人的包名重复,并且一目了然。

接下来我们新增一个@comp/ui子项目,看看

sql 复制代码
    lerna create @comp/ui

可以看到默认创建的子项目是入口是lib/ui.js,是一个js项目,如果想要开发一个vue或者react组件库,可以自行修改项目为对应的结构。

这里,我再增加一个子项目@comp/util,最终的结构如下:

值得一提的是,如果我们的包最终不是发布到npm,而是公司内部的仓库中,可以修改package.jsonpublishConfig.registry的地址为公司内部地址。

4. 子模块增加依赖

如果需要为子模块增加依赖,比如@comp/util需要用到axios依赖,执行

sql 复制代码
    yarn workspace @comp/util add axios

安装完成后,我们发现在packages/util下面,并没有node_modules文件夹,axios 的依赖是安装到了根项目的node_modules下,这样,所有的子项目,依赖就可以共用。

5. 全局依赖

如果你拿到一个lerna管理的项目,安装依赖的时候只需要在根目录执行

markdown 复制代码
    yarn install

lerna就会自动安装全部子项目的依赖,十分方便。

6. 发布版本

首先需要将本地所有的更改都提交到git仓库。

其次执行npm login登录。

最后执行lerna publish,根据提示操作即可。

lerna会提供给我们选择哪种版本类型的升级。

最后就可以在自己的仓库看到对应版本的tag,并且可以在npm上看到自己发布的包了,之后继续迭代我们的项目即可。

相关推荐
长天一色8 分钟前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
feng_xiaoshi20 分钟前
【云原生】云原生架构的反模式
云原生·架构
NiNg_1_23426 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河28 分钟前
CSS总结
前端·css
BigYe程普1 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai1 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默1 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_857297912 小时前
招联金融2025校招内推
java·前端·算法·金融·求职招聘