yarn workspace的用法

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 的依赖包。