五分钟彻底掌握 Yarn Workspaces Monorepo 学习 Yarn Workspaces 之前，需要先了解

Monorepo

学习 Yarn Workspaces 之前，需要先了解一下 Monorepo 概念

Monorepo（Mono Repository） 是一种将多个项目（或多个模块）存储在同一个版本控制仓库中的软件开发方法。在 Monorepo 中，所有相关的代码（可能是多个服务、库、应用等）共享一个代码库，而不是每个项目有自己的独立仓库

一个项目代码搞一个独立仓库这种情况最常见，将多个项目（或多个模块）搞在一个独立仓库就是 Monorepo。我们在这里不讨论 Monorepo 缺点和优点，只了解其概念

市面上有很多成熟的工具提供 Workspaces 功能，而我们常用的包管理器 yarn 就提供了 Yarn Workspaces。下面笔者使用 yarn1.0 提供 Yarn Workspaces 为大家介绍它如何使用

笔者用一个小例子展示 Yarn Workspaces 全过程，这个例子是一个完整的 React 项目作为一个 package, 把一些工具方法作为另一个 package

首先建立一个空项目

mkdir yarn-monorepos-starter && cd yarn-monorepos-starter && yarn init

根目录产生 package.json 如下所示

{
  "name": "yarn-monorepos-starter",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT"
}

然后向其中添加"private": true 配置项和 workspaces，最终结果如图所示

接着在添加 packages 文件夹，并在其中初始化 shared-utils 和 react-app 两个项目

index.mjs 的内容为

export const name = "shared-utils";

export const version = "0.0.1";

package.json 的内容是

{
  "name": "shared-utils",
  "version": "0.0.1",
  "license": "MIT",
  "exports": {
    ".": {
      "import": "./index.mjs"
    }
  }
}

而 react-app 是用 vite 工具创建的 react 模版

现在在 react-app 添加 shared-utils 依赖，在终端中，cd packages/react-app 下，然后执行 yarn add shared-utils@^0.0.1

然后在 App.jsx 中使用 shared-utils

最后在根目录的 package.json 中加入脚本

表示在根目录下启动 react-app 这个 package 的 npm script

最终效果如下所示

在根目录启动所有 packages 的命令

yarn workspaces run

启动指定 package 的 npm scripts，应该这么写

yarn workspace <workspace name> run <npm script>

此命令将显示当前项目的工作区依赖树

yarn workspace awesome-package add react react-dom --dev

向指定的 package 中添加依赖，添加 --dev 参数表示是 devDependencies