使用 pnpm 创建 Monorepo | Day 1本节介绍了如何通过 Github 来管理项目代码，并且基于 pnp

使用 Github 托管代码

登录 Github，创建一个仓库（基操，不赘述）。

有两种方法与本地仓库关联：

1. 在本地硬盘处打开终端，直接克隆仓库：

git clone <仓库地址>

1. 在本地硬盘上创建一个目录，然后用终端进入该目录：

# 初始化仓库
git init
# 与远程仓库绑定
git remote add origin <仓库地址>

创建文件

打开 VS Code ，然后在 VS Code 中打开上一步中创建的目录：

创建一个文件 README.md，在终端中使用如下命令提交代码到本地仓库：

# 暂存变更
git add .
# 提交到本地仓库
git commit -m 'docs: create README.md'

然后通过如下命令将本地仓库的提交推送到远程仓库：

# 前述用克隆方式创建的目录，直接推送：
git push

# 前述通过初始化方式创建本地仓库，则在第一次推送时，设置对应关系，将本地分支与远程分支对齐：
git push -u origin main

初始化 npm 包

使用如下命令，来初始化一个 npm 包：

# pnpm
pnpm init

# npm
npm init -y

# yarn
yarn init

初始完成后，会在目录中多一个 package.json 的文件。

创建 Monorepo

在目录中创建一个文件 pnpm-workspace.yaml ,在文件中编写如下内容：

packages:
  - 'packages/*'

此配置说明：在 packages 目录下的直接子目录为独立的 npm 包。

在目录下创建 packages 目录，并在该目录中再创建两个目录： client 和 server，这两个目录分别放置全栈项目的前端和后端代码。

为两个目录分别初始化 npm 包，在其各自的 package.json 文件中将它们分别命名为 @fss/client 和 @fss/server，各自代表客户端的前端和服务端的后端。

总包和分包之间的 scripts

假如，在 @fss/client 和 @fss/server 中都有一个主文件 src/main.js ，分别有如下内容：

// @fss/client src/main.js
console.log('console.log from client')

// @fss/server src/main.js
console.log('console.log from server')

分别在上述两个分包中的 package.json 文件中注册一个 scripts :

{
    ...,
    "scripts": {
        "start": "node src/main.js"
    }
}

然后，在总包的 pacakge.json 中也注册两个 scripts:

{
    ...,
    "scripts": {
        "start:client": "pnpm -F @fss/client start",
        "start:server": "pnpm -F @fss/server start"
    },
}

这样，在总包的路径下，就可以分别调用和运行分包中的 scripts：

pnpm start:client  # 终端输出 console.log from client
pnpm start:server  # 终端输出 console.log from server

至此，我们完成了一个基于 pnpm 的 Monorepo 最基础的雏形，从下一节开始，我们将处理一些具体的开发需求。

(如此文有任何未尽之处，欢迎站内信交流。)

源码

完整仓库

本文相关 commit