如何使用 Yarn Workspaces 配置一个 Monorepo JS/TS 项目

未定义变量
2,735 阅读5分钟

一、什么是 Monorepo

Monorepo 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个 repo。

├── packages|
|   ├── pkg1|
|   |   ├── package.json|
|   ├── pkg2|
|   |   ├── package.json
├── package.json

二、使用 Yarn Workspaces 实现一个简单的 JS Monorepo 项目

创建项目目录

创建一个名为 monorepo 的文件夹

mkdir monorepo

初始化项目

在 monorepo 目录下初始化 yarn

yarn init

此时 monorepo 目录下应出现 package.json 文件

配置 Yarn Workspaces

在 /monorepo/package.json 文件中修改代码如下

{
  "name": "monorepo",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "workspaces":  [
      "packages/*"
    ],
}

private:true：定义了本项目为私有项目，在使用 yarn workspace 时需要始终将 private 属性设置为 true。

workspaces：定义了每个 package 的位置。在本项目中，我们将会把每个 package 放在 packages 目录下。注意该属性为字符串数组，我们可以根据自身项目情况添加多个位.

创建 packages 目录

在 monorepo 目录下创建 packages 文件夹，用于存放我们的 packages

mkdir packages

初始化 package-a

在 /monorepo/packages/ 目录下，创建文件夹 package-a，同时 yarn 初始化

cd packages
mkdir package-a
cd package-a
yarn init

我们可以遵循 monorepo 命名惯例，在 package.json 中将其命名为 @monorepo/package-a

开发 package-a

此时，我们已经可以开始对 package-a 进行开发了。

作为演示，我们可以在 package-a 下新建 main.js 文件，并添加如下代码

// index.js
console.log("这是 package-a");

初始化 package-b

在 /monorepo/packages/ 目录下，创建文件夹 package-b，同时 yarn 初始。 步骤同 package-a

开发 package-b

此时，我们已经可以开始对 package-b 进行开发了。

作为演示，我们可以在 package-b 下新建 main.js 文件，并添加如下代码

// index.js
console.log("这是 package-b");

在 package-b 中引用 package-a

Monorepo 一大优势是在同一 monorepo 项目下的不同 packages 可以相互引用。

假设我们的 monorepo 项目下有3个 react app。每个 react app 均需要一个相同的折线图组件。此时我们可以：

  • 每个 react app 分别开发各自的折线图组件。但这造成了重复劳动、且今后会同时维护三个折线图组件。
  • 先在一个 react app 开发出来折线图组件，随后剩下两个 react app 照搬照抄。这样虽然解决了重复开发的问题，但当折线图组件需要变动时，还是需要维护三个 react app 的折线图组件。
  • 创建一个折线图的 package，在三个 react app 中引用该 package。这样，我们只需要开发和维护该折线图 package 即可。

首先，我们需要在 /monorepo/packages/package-b/package.json 中添加 package-a 的依赖。

{
  "name": "@monorepo/package-b",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "node index.js"
  },
  "dependencies": {
    "@monorepo/package-a": "1.0.0"
  }
}

然后在 /monorepo/packages/package-b/index.js 下引用 package-a

// index.js
require("@monorepo/package-a");
console.log("This is package-b");

注意，此时如果运行 package-b 下的 index.js 会出现错误，这是因为我们虽然在 dependencies 中引用了 package-a，但我们还未安装该 package。因此，我们需要运行yarn或者yarn install。

此时，我们再运行 package-b 下的 index.js 文件，我们可以看到如下输出

$ node index.js
This is package-a
This is package-b

三、引入 TS 以及 React

下面，让我们来在该 monorepo 项目中引入 TS 以及 React

创建 React App

在 /monorepo/packages 目录下，执行

yarn create react-app client --template typescript

随后，可以进入 client 目录启动 react 来确认是否安装成功

cd client
yarn start

创建 Interface package

假设我们用 TS 做全栈开发，一个常见的需求就是前后端 API 的 interface 最好可以共享。

因此这里我们创建一个 package 来共享 interface

首先，我们在 /monorepo/packages/ 目录下新建文件夹 interface

mkdir interface

然后，我们在 interface 下初始化 yarn 项目 yarn init

随后，我们初始化 TS 项目 tsc --init

我们修改 tsconfig.json "declaration": true "outDir": "./dist" "rootDir": "./src"

最后我们修改 package.json 文件如下

{
  "name": "@monorepo/interface",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "build": "tsc"
  }
}

开发 interface package

在 interface 目录下，我们可以创建 src 目录，并在 src 目录下创建 index.ts

在 index.ts 内声明一个 interface

// index.ts
export interface MyAPIResponse{
    msg: string
}

此时，我们在 interface 目录下将 TS 代码转成 JS 代码 yarn build

我们可以看到 interface 目录下新出现一个 dist 文件夹，用于保存我们 build 好的 JS 文件。

在 React 项目中引用 interface package

在 react 项目中的 package.json 内添加依赖

"@monorepo/interface": "1.0.0"

随后安装依赖 yarn 或者 yarn install

这样我们就可以在 React 项目中引用 interface package 里面定义的 interface 了。如在 src/App.tsx 中

import { MyAPIResponse } from "@monorepo/interface";

四、nohoisting 以及全局 package

nohoisting

monorepo 中所有的依赖都会储存在根目录下啊的 node_modules 中，既：/monorepo/node_modules

但某些情况下，我们可能需要同一 package 的不同版本。例如：一个 react 项目较老，使用 bootstrap 4。而另一个在开发中的新项目决定使用 bootstrap 5。

此时我们需要修改根目录下的 package.json 文件

{
  "name": "monorepo",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/bootstrap"
    ]
  }
}

可以看到，我们的 workspaces 新增了 nohoist 属性，我们可以在这里添加不需要共享的 packages 的名称。

安装全局 package

在开发项目过程中，我们也许需要 prettier 等工具帮我们格式化代码，这时，我们可以在根目录下安装 prettier

yarn add prettier -W

这里我们使用 W flag 来让 yarn workspace 在根目录下安装依赖。

总结

本文介绍的 yarn workspaces monorepo 的一些基本概念以及实现方式。

在实际工作中，可以结合 lerna 等其他工具一起搭建我们的 monorepo 项目。

avatar
文章
阅读
粉丝