使用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，整个结构长这样：

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下面了：

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

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

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

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

按照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"