Monorepo
学习 Yarn Workspaces 之前,需要先了解一下 Monorepo 概念
Monorepo(Mono Repository) 是一种将多个项目(或多个模块)存储在同一个版本控制仓库中的软件开发方法。在 Monorepo 中,所有相关的代码(可能是多个服务、库、应用等)共享一个代码库,而不是每个项目有自己的独立仓库
一个项目代码搞一个独立仓库这种情况最常见,将多个项目(或多个模块)搞在一个独立仓库就是 Monorepo。我们在这里不讨论 Monorepo 缺点和优点,只了解其概念
Yarn Workspaces
市面上有很多成熟的工具提供 Workspaces 功能,而我们常用的包管理器 yarn 就提供了 Yarn Workspaces。下面笔者使用 yarn1.0 提供 Yarn Workspaces 为大家介绍它如何使用
quick start
笔者用一个小例子展示 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
最终效果如下所示
常用命令
run
在根目录启动所有 packages 的命令
yarn workspaces run
启动指定 package 的 npm scripts,应该这么写
yarn workspace <workspace name> run <npm script>
info
此命令将显示当前项目的工作区依赖树
add
yarn workspace awesome-package add react react-dom --dev
向指定的 package 中添加依赖,添加 --dev
参数表示是 devDependencies