王鹏飞

Blog

Tutorial

About

JavaScript

2022年11月12日

Yarn Workspace

每当你准备写一个新项目的时候,你有没有想过是否需要将前后端代码用不同的 git 仓库进行管理,又或者是否需要将一些相对底层的代码拆分成一个单独的 git 仓库,以便于后面等底层代码稳定的时候,可以直接发布为一个独立的 npm package 供项目使用。

那么这样不是可以直接用不同的 git 仓库进行管理么。的确可以这样,但是如果不同的项目在不同的 git 仓库时,每当我要在另一个项目中查找一些代码的时候,就显得不是特别方便,所以我希望所有相关的 package 能在一个 git 仓库中。

以前我经常会在这件事上纠结,也为此查找了很多资料。今天记录下我常用的一种管理代码的方式——yarn workspace。

yarn workspace 是什么?

yarn workspace 可以让一个单独的 git 仓库包含多个 package。例如你有一个 front-end 项目和一个 back-end 项目,那么你可以通过 yarn workspace 同时管理这两个 package,package 之间是相互独立的,即使脱离了主仓库也可以是一个完整独立的项目。

React 就使用了 yarn workspace 机制。

实践

  1. 创建项目文件

新建文件夹 example-monorepo:

$ mkdir example-monorepo

example-monorepo 文件夹中创建 package.json:

$ cd example-monorepo
$ touch package.json

package.json 中输入以下内容:

{
   "private": true,
   "name": "example-monorepo",
   "workspaces": [],
   "scripts": {}
}
  1. 创建一个 react 项目并添加至 workspace list

在项目中创建 packages 文件夹,用于存储不同的子项目。

$ mkdir packages

创建 react 项目:

$ yarn create-react-app packages/client

告诉 Yarn 将 client 以 workspace 处理。我们只需要将 client 添加至 package.json 文件里的 workspaces 列表中。

{
   "private": true,
   "name": "example-monorepo",
   "workspaces": ["client"],
   "scripts": {}
}
  1. 创建一个 express 项目,并添加至 workspace list 中

创建了前端项目后,我们再创建一个 express 后端项目,首先安装 express-generator

$ yarn global add express-generator --prefix /usr/local

使用 express-generator 创建 express 项目。

$ express --view=pug packages/server

同样将 server 添加至 workspace 中。

{
   "private": true,
   "name": "example-monorepo",
   "workspaces": ["client", "server"],
   "scripts": {}
}
  1. 安装依赖

安装运行所需的依赖,我们只需要在项目的根目录下执行 yarn install 命令,yarn 会自动为所有的 package 安装依赖。

$ yarn install

这个命令会生成一个 yarn.lock 文件,包含项目运行所有的依赖信息,这个文件是自动生成的,一般不要手动修改它。

  1. 使用(*)导入所有的 package

workspace 支持 * 可以匹配任意名称的 package。所以可以将 workspace 改为:

{
   "private": true,
   "name": "example-monorepo",
   "workspaces": ["packages/*"],
   "scripts": {}
}
  1. 运行所有 package

使用 concurrently 并行运行多个脚本命令。

yarn add -W concurrently

将 package.json 改为:

{
   "private": true,
   "name": "example-monorepo",
   "workspaces": ["packages/*"],
   "scripts": {
       "client": "yarn workspace client start",
       "server": "yarn workspace server start",
       "start": "concurrently --kill-others-on-fail \"yarn server\"  \"yarn client\"
   }
}

通过 yarn workspace <package> <script> 可以执行 package 中的命令。

最后运行项目:

$ yarn start

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项