前端项目管理 & yarn workspace、lerna 的作用

1. yarn

npm 安装依赖很慢，所以才有了 yarn ， yarn 会对已下载过的依赖包进行缓存，其它项目再次安装时直接用缓存的即可，下载速度大大提升，当然，这只是 yarn 的功能之一，接下来我还会介绍其它功能。

1.1 全局安装

npm install yarn --global

1.2 使用

1.2.1 新建一个项目比如 yarn-example

1.2.2 初始化 packages.json

yarn init -y

1.2.3 安装一个依赖比如 lodash

yarn add lodash

1.2.4 新建 main.js 文件并导入使用

// main.js
const lodash = require('lodash')
console.log(lodash)

项目结构如图

在这里插入图片描述

现在其它项目再去下载 lodash 速度将大大提升，当然了，仅仅一个依赖包是体现不出来的。

2. yarn workspace

yarn workspace 也是 yarn 中很有用的功能之一，简单讲就是将每个项目的 node_modules 都提升到根目录的 node_modules 中，形成多个项目复用同一套依赖包效果。

2.1 配置

2.2.1 在package.json 中新增以下两个选项

"dependencies": {
    
    
   .....
},
"private": true,
"workspaces": ["packages/*"]

private 表示这是一个私有项目，不会被 publish 到 npm
packages/* 表示 packages 下的每个目录（项目）代表一个 workspace

2.2 使用

2.2.1 在根目录中新建 packages 目录并在里面新建两个项目：project1 / project2

2.2.2 project1 和 project2 各自新建如 main.js，然后填充如下代码

// project1/main.js & project2/main.js
const lodash = require('lodash')
console.log('lodash', lodash)

2.2.3 接下来在 project1 或 project2 中执行各自的 main.js 即可看到效果

在这里插入图片描述
项目结构如图

2.3 给某个项目安装依赖包

比方我们想为 project1 添加 vue 依赖，这里首先要在 project1 项目中初始化 packages.json，里面的 name 即代表 workspace name
现在我们来开始安装 vue

yarn add workspace project1 add vue

如果要卸载

yarn add workspace project1 remove vue

注意：vue 安装后的依赖还是放在根目录 node_modules 中而不是 project1 里面，因此 project2 同样可以引用 vue，你可能好奇，既然 project2 可以引用 project1 指定安装的 vue 依赖，那上面的命令跟普通的 yarn add vue 有什么区别？答案是区别于依赖项属性的存放位置

yarn add vue 依赖选项属性会放到根目录里的 packagse.json
yarn workspace project1 add vue 依赖选项属性会放到 project1 里的 packagse.json

为什么这样做？原因很简单，如果某个项目后续需要单独抽出来时，我们根据该项目所对应的 packages.json下载相关依赖即可正常运行该项目。

所以合理的安装依赖是很有必要的！

另一种情况是某个项目也会有自己的 node_modules，这种情况发生在项目之间使用相同的依赖但版本不同时，比方 project1 使用 "axios": "^0.27.2" 而 project2 使用 "axios": "0.21.1" ，感兴趣的同学可以自己试试。
在这里插入图片描述
补充：如果真想让某个项目的所有依赖只安装于自己的项目，可以在根目录的 packages.json 配置 nohoist 选项

"private": true,
"workspaces": {
    
    
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "**/project1/**/*"
  ]
},

这样 project1 的依赖将会放到自己的目录，但其它项目则无法再引用 project1 的依赖包。

3. lerna

yarn workspace 可以解决多个项目依赖的问题，而 lerna 可以解决多个项目的运行、构建及发布版本的问题，这对于多项目管理来说非常有利，lerna 与 yarn workspace 可以结合使用。

3.1 安装

npm install lerna --global

3.2 配置

3.2.1 我们继续在 yarn-example 项目中配置，首先在根目录运行

lerna init

此命令会在根目录新建 lerna.json 配置文件，内容如下：

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

packages/* 作用和 yarn workspace 一样用来指定项目目录。

3.3 使用

接下来我们将通过一条 lerna 命令来运行 project1 / project2 各自的 build 脚本命令，假设 project1 / project2 各自的 main.js 内容如下：
在这里插入图片描述
build 命令如下

在这里插入图片描述
现在我们只需在根项目中运行：

lerna run build

效果如图：
在这里插入图片描述
是不是很方便？如果要运行各自的 run 命令只需输入 lerna run run 即可，这里就不演示了。

3.4 版本管理

接下来我将演示如何通过 lerna 对每个项目的 packages.json 的 version版本号自动更改，这里会用到 lerna version 命令，但此命令有前提条件：

项目已初始化 git
只有将本地修改进行 git commit 后才能使用，否则报错

我们按照以上流程，先将本地初始化 git 并进行 commit
在这里插入图片描述
接下来运行

lerna version

运行后会提示选择一个版本格式，这里我选择 Patch 从 0.0.1 作为起始版本。

在这里插入图片描述
接下来会让你确认是否更改，因为我们的 package.json 里面的 version 默认都是 1.0.0 开始的，这里将会对它们进行覆盖。

下次我们对本地的某些改动重新 commit 并输入 lerna version 时，这些项目的 version 将会变成 0.0.2，以此类推，无需再去手动更改，是不是很方便？同时 lerna.json 里面的 version 也会自动更新。

关于 lerna 其它功能感兴趣的可参考官方文档。

4. 总结

yarn workspace 能让多个项目公用一套依赖
lerna 只需一条命令即可执行各个项目的脚本命令，还可以对这些项目的 version 进行自动化控制。
yarn workspace + lerna 可以同时使用

完！

参考文献：
https://www.npmjs.com/package/yarn
https://classic.yarnpkg.com/lang/en/docs/workspaces/