使用mono-repo实现跨项目组件共享 (3)

lerna是最知名的mono-repo的管理工具,今天我们就要用它来搭建前面提到的共享业务组件的项目,我们目标的项目结构是这个样子的:

mono-repo-demo/ --- 主项目,这是一个Git仓库 package.json packages/ common/ --- 共享的业务组件 package.json admin-site/ --- 柜员网站项目 package.json customer-site/ --- 客户网站项目 package.json lerna init

lerna初始化很简单,先创建一个空的文件夹,然后运行:

npx lerna init

这行命令会帮我创建一个空的packages文件夹,一个package.json和lerna.json,整个结构长这样:

image-20201225162905950

package.json中有一点需要注意,他的private必须设置为true,因为mono-repo本身的这个Git仓库并不是一个项目,他是多个项目,所以他自己不能直接发布,发布的应该是packages/下面的各个子项目。

"private": true,

lerna.json初始化长这样:

{ "packages": [ "packages/*" ], "version": "0.0.0" }

packages字段就是标记你子项目的位置,默认就是packages/文件夹,他是一个数组,所以是支持多个不同位置的。另外一个需要特别注意的是version字段,这个字段有两个类型的值,一个是像上面的0.0.0这样一个具体版本号,还可以是independent这个关键字。如果是0.0.0这种具体版本号,那lerna管理的所有子项目都会有相同的版本号----0.0.0,如果你设置为independent,那各个子项目可以有自己的版本号,比如子项目1的版本号是0.0.0,子项目2的版本号可以是0.1.0。

创建子项目

现在我们的packages/目录是空的,根据我们前面的设想,我们需要创建三个项目:

common:共享的业务组件,本身不需要运行,放各种组件就行了。

admin-site:柜员站点,需要能够运行,使用create-react-app创建吧

customer-site:客户站点,也需要运行,还是使用create-react-app创建

创建子项目可以使用lerna的命令来创建:

lerna create <name>

也可以自己手动创建文件夹,这里common子项目我就用lerna命令创建吧,lerna create common,运行后common文件夹就出现在packages下面了:

image-20201231145959966

这个是使用lerna create默认生成的目录结构,__test__文件夹下面放得是单元测试内容,lib下面放得是代码。由于我是准备用它来放共享组件的,所以我把目录结构调整了,默认生成的两个文件夹都删了,新建了一个components文件夹:

image-20201231150311253

另外两个可运行站点都用create-react-app创建了,在packages文件夹下运行:

npx create-react-app admin-site; npx create-react-app customer-site;

几个项目都创建完后,整个项目结构是这样的:

image-20201231151536018

按照mono-repo的惯例,这几个子项目的名称最好命名为@<主项目名称>/<子项目名称>,这样当别人引用你的时候,你的这几个项目都可以在node_modules的同一个目录下面,目录名字就是@<主项目名称>,所以我们手动改下三个子项目package.json里面的name为:

@mono-repo-demo/admin-site @mono-repo-demo/common @mono-repo-demo/customer-site lerna bootstrap

上面的图片可以看到,packages/下面的每个子项目有自己的node_modules,如果将它打开,会发现很多重复的依赖包,这会占用我们大量的硬盘空间。lerna提供了另一个强大的功能:将子项目的依赖包都提取到最顶层,我们只需要先删除子项目的node_modules再跑下面这行命令就行了

lerna bootstrap --hoist

删除已经安装的子项目node_modules可以手动删,也可以用这个命令:

lerna clean yarn workspace

lerna bootstrap --hoist虽然可以将子项目的依赖提升到顶层,但是他的方式比较粗暴:先在每个子项目运行npm install,等所有依赖都安装好后,将他们移动到顶层的node_modules。这会导致一个问题,如果多个子项目依赖同一个第三方库,但是需求的版本不同怎么办?比如我们三个子项目都依赖antd,但是他们的版本不完全一样:

// admin-site "antd": "3.1.0" // customer-site "antd": "3.1.0" // common "antd": "4.9.4"

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgfdd.html