每当你准备写一个新项目的时候,你有没有想过是否需要将前后端代码用不同的 git 仓库进行管理,又或者是否需要将一些相对底层的代码拆分成一个单独的 git 仓库,以便于后面等底层代码稳定的时候,可以直接发布为一个独立的 npm package 供项目使用。
那么这样不是可以直接用不同的 git 仓库进行管理么。的确可以这样,但是如果不同的项目在不同的 git 仓库时,每当我要在另一个项目中查找一些代码的时候,就显得不是特别方便,所以我希望所有相关的 package 能在一个 git 仓库中。
以前我经常会在这件事上纠结,也为此查找了很多资料。今天记录下我常用的一种管理代码的方式——yarn workspace。
yarn workspace 可以让一个单独的 git 仓库包含多个 package。例如你有一个 front-end 项目和一个 back-end 项目,那么你可以通过 yarn workspace 同时管理这两个 package,package 之间是相互独立的,即使脱离了主仓库也可以是一个完整独立的项目。
React 就使用了 yarn workspace 机制。
新建文件夹 example-monorepo
:
$ mkdir example-monorepo
在 example-monorepo
文件夹中创建 package.json
:
$ cd example-monorepo
$ touch package.json
在 package.json
中输入以下内容:
{
"private": true,
"name": "example-monorepo",
"workspaces": [],
"scripts": {}
}
在项目中创建 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": {}
}
创建了前端项目后,我们再创建一个 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": {}
}
安装运行所需的依赖,我们只需要在项目的根目录下执行 yarn install
命令,yarn 会自动为所有的 package 安装依赖。
$ yarn install
这个命令会生成一个 yarn.lock
文件,包含项目运行所有的依赖信息,这个文件是自动生成的,一般不要手动修改它。
workspace 支持 *
可以匹配任意名称的 package。所以可以将 workspace 改为:
{
"private": true,
"name": "example-monorepo",
"workspaces": ["packages/*"],
"scripts": {}
}
使用 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
(完)