手把手教你基于 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，为它们分别配置不同的端口，防止启动冲突。

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/)，可以分别切换两个子项目页面：

同时由于三个项目是并行启动的关系，子项目也可以通过网址直接访问(http://localhost:8081/ 和 http://localhost:8082/)，这里就不展示了。

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