Monorepo的入门—— 采用pnpm构建一个demo

前言

Monorepo大家应该都听过，并且知道一些优秀开源项目都是使用Monorepo的方式管理项目的，比如Vue3、Vite、ElementPlus等，同时这几个项目都是采用pnpm作为包管理工具。

Monorepo是什么？

Monorepo 是指包含多个不同项目的单个仓库，且这些项目之间具有良好的关系。具体可以参考你所需要了解的关于 Monorepo 的一切这篇文章。

pnpm是什么？

快速的，节省磁盘空间的包管理工具。参考官方文档。

pnpm构建Monorepo的demo

1、安装pnpm

这里使用npm安装

npm install -g pnpm

2、创建目录并初始化

// 创建monorepo-pnpm-demo目录
mkdir monorepo-pnpm-demo
// 在monorepo-pnpm-demo根目录下，初始化
pnpm init

如图所示：

修改一下package.json里面的内容，加一个type字段，使用ESModule模块化规范。
代码如下：

{
  "name": "monorepo-pnpm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3、创建pnpm-workspace.yaml文件

这个文件定义了工作空间的根目录。

packages:
  - 'packages/**'

接下来，在packages文件夹中创建多个项目，目录结构如下：

4、写packages下每个项目的package.json

主要是name字段，方便以后使用。

packages/components这个项目下的package.json

{
    "name": "@packages/components",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "type": "module",
    "license": "ISC"
}

packages/utils这个项目下的package.json

{
    "name": "@packages/utils",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "type": "module",
    "license": "ISC",
    "dependencies": {
        "dayjs": "^1.11.4",
        "lodash": "^4.17.21"
    }
}

5、安装dependencies

如果在根目录下安装依赖的话，这个依赖可以在所有的packages中使用。如果需要为具体的一个package安装依赖，如何处理？

pnpm --filter @packages/utils install dayjs

上面命令表明：在@packages/utils中安装dayjs。其中--filter过滤包名，具体使用可以参考pnpm --filter。

6、packageA中引用packageB

首先，在packages/utils/index.js中export一个格式化日期函数，代码如下：

import dayjs from 'dayjs'

export function formatDate(value, format = 'YYYY-MM-DD') {
    return dayjs(value).format(format)
}

然后执行如下命令：

pnpm -F @packages/components install @packages/utils

-F等价于–filter

这个命令表示在@packages/components安装@packages/utils。

这个时候，packages/components这个项目下的package.json发生了变化，多了dependencies。

{
    "name": "@packages/components",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "type": "module",
    "license": "ISC",
    "dependencies": {
        "@packages/utils": "workspace:^1.0.0"
    }
}

最后，在packages/components/index.js中写入如下代码：

import { formatDate } from '@packages/utils'
console.log(formatDate(new Date()))

然后在项目根目录运行如下命令：

node packages/components

控制台会打印出当前日期。