前端Monorepos项目使用npm-workspaces

【前言】

之前一直使用 lerna 来管理前端 monorepos 项目，

今天升级 lerna 后发现不支持 bootstrap 命令了，

替换为了 npm 的 workspaces 相关命令。

【lerna bootstrap】

lerna 的相关使用可以看这篇文章，

一文学会用Lerna管理多个npm包

而 lerna 的 bootstrap 命令，

用来给 packages 下的包安装依赖，以及管理相互间的依赖。

这里用一个 monorepos 前端项目来举例，

地址： https://github.com/uikoo9/offline-to-online

这个项目下有 4 个包，

相互间的关系如下：

可以看到 qiao-is-online 依赖 offline-to-online和 qiao-ping 两个包，

使用 lerna bootstrap 命令安装依赖后，可以看到 qiao-is-online 下的依赖是本地链接的，

可以看到，

lerna 之前的 bootstrap 命令，主要用来

1.安装各个包的依赖

2.如果依赖是本地包，不会下载依赖，而是改为本地链接

但是 lerna 升级到 7.0.0 版本后移除了这个命令，

提示如下

lerna 官方的说明在这里： https://lerna.js.org/docs/legacy-package-management

大概意思是 npm 这类包管理工具已经具备 bootstrap 命令的能力了，

所以移除了该命令，推荐使用 npm 的 workspaces 相关能力。

【npm workspaces】

npm的 workspaces 相关能力文档地址： https://docs.npmjs.com/cli/v9/using-npm/workspaces

这里对比 lerna bootstrap 来看下

lerna.json vs package.json

lerna.json 中的 packages 属性声明了相关包位置，

例如下面的配置，告诉 lerna 相关包都在 packages 这个文件夹下。

{
  "packages": ["packages/*"],
  "version": "3.1.6",
  "command": {
    "version": {
      "allowBranch": "master"
    },
    "publish": {
      "allowBranch": "master",
      "message": "chore(release): publish"
    }
  }
}

package.json 中的 workspaces 属性类似，

例如下面的配置，告诉 npm 相关包都在 packages 这个文件夹下，

{
  "name": "dishi-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

如果要使用 npm workspaces 属性，

对应的要在lerna.json 中做修改，如下

也就是将之前 lerna.json 中的 packages 属性去掉，

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "version": "3.1.8",
  "command": {
    "version": {
      "allowBranch": "master"
    },
    "publish": {
      "allowBranch": "master",
      "message": "chore(release): publish"
    }
  }
}

node_modules 位置

lerna bootstrap 默认安装后，

相关包的依赖都在本包下，例如下图，

qiao-is-online 的依赖在本文件夹下的 node_modules 下

而给 npm 添加 workspaces 属性后，

执行 npm i 后，会将相关包的依赖都安装到根路径的 node_modules 下，

虽然都安装到了根路径下，但是可以看到本地相互依赖的包都是 link 的方式

效果类似 lerna bootstrap —hoist

但是如果一个依赖包，在根节点下有依赖，

在 packages 下包也有依赖，

且两个依赖的版本不一样， 例如下面这种情况，

可以看到 uuid 在 packages/qiao-encode 中依赖版本是 9.0.0，

而在根路径下的 lerna 依赖的是 8.3.2，

这时，使用了 npm workspaces 时，

npm i 后会将 packages/qiao-encode 的依赖安装到当前包下

【总结】

lerna 中的lerna bootstrap 相关命令，

可以用 npm 的 workspaces 属性以及 npm i 命令替代