workspaces

为了在一个文件下管理多个平行的代码库（monorepo），于是抱管理工具相继诞生了 workspaces 功能。

• yarn 支持 workspaces 功能
• npm7 开始支持 workspaces 功能
• pnpm 支持 workspaces 功能
• Lerna 命名行工具支持管理 workspaces

workspace 理论基础

yarn workspace 使用示例

1. 使用 yarn 开始一个 monorepo

mkdir <project_name>

cd <project_name>

yarn init -y
复制代码

注意如下两个字段必须存在：

• 字段 version
• 字段 name

2. 改造 package.json 文件，增加 workspaces/private 字段

{
  "private": true, // 必须是一个私有的包
  "name": "<your_project_name>",
  "version": "1.0.0",
  "workspaces": [
    "packages/*",// 将所有 packages 下所有的文件作为 mono repo
  ],
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}
复制代码

3. 手动增加 project1/project2 项目文件夹

├── package.json # 顶层 package.json
├── packages
│   ├── project1 # mono repo 1
│   └── project2 # mono repo 2
└── yarn.lock
复制代码

建好文件夹后，初始化两个项目, 因为只有初始化两个项目之后才能，使用 workspace 的相关命令，否则 yarn 任务 project1/project2 不是一个项目。

cd packages/project1
yarn init -y

cd ../packages/project1
yarn init -y
复制代码

当然如果，你使用的 umijs/vue 等框架，可以使用其脚手架工具来初始化一个项目。

4. 在 project1/project2 项目中写代码

操作 mono repo 的命令：

yarn workspace <workspace_name> <command>
复制代码

例如，我们要在project1 中使用 React 开发项目，在项目根目录执行：

yarn workspace project1 add react react-dom
复制代码

project2 中我们添加 vue

yarn workspace project2 add vue vue-router vuex
复制代码

安装之后，查看根 package.json 文件没变化，但是 project1/project2 项目的 package.json 发生了变化。发现所用 yarn workspace 命令安装包 project1/project2 中没有生成 node_modules, 两个项目的依赖包都放在了根 node_modules。

5. 使用常用 @umijs 生成 project3

cd packages/
mkdir project4 && cd project3

yarn create @umijs/umi-app # 不会安装 node_modules

# 手动安装 node_modules
cd porject3
yarn workspace project3 install

# 启动 umi 服务
yarn workspace project3 start #http://localhost:8000
复制代码

6. 使用常用 @vue/cli 生成 project4

cd packages/
vue create project4 # vue 会帮我们安装

cd project4
rm -rf node_modules

cd ../../
yarn workspace project4 install

## 启动 vue 服务
yarn workspace project4 serve # http://localhost:8080/ 
复制代码