使用pnpm创建一个monorepo仓库

关于monorepo

简单来说monorepo就是将多个项目（有关联）放到一个仓库，其好处最明显的就是解决代码复用的问题和开发流程的统一。

至于更多关于monorepo管理方式，网上也有很多文章介绍，此文的主要目的是记录一下初始化过程。

创建项目

新建目录并初始化（项目名以kklearn为例）
1
pnpm init

接下来在生成的package.json文件中写入字段来限制使用pnpm等

{
  "name": "kklearn",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "engines": {
    "node": ">=16",
    "pnpm": ">=7"
  },
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

限制该包为私有包，避免npm整包发布；限制pnpm版本为7以上。

在项目根目录新建pnpm-workspace.yaml文件，并写入以下内容
1
2
3
packages:
- 'libs/**'
- 'packages/**'
接下来后，我们的应用即创建在packages目录下。而libs目录则是存放一些公共的方法等内容。
创建子包
至此，我们的主包基本搭建完成。其基本目录结构如下：
1
2
3
4
├── libs
├── package.json
├── packages
└── pnpm-workspace.yaml
接下来在packages中创建第一个应用，以Nuxt为例，进入packages目录执行pnpm dlx nuxi init web命令，来初始化一个项目名为web的项目。
修改刚刚创建的应用的包名
1
2
3
{
"name": "@kklearn/web"
}
名称为@主包名/子包名
再来创建一个工具函数，例如Axios
在libs目录创建utils/request目录，并创建文件夹index.ts作为入口文件。并初始化一个package.json文件。名称为@kklean/request。
安装axios，并在index.ts中导出一个axios实例。
1
2
3
4
5
import axios from 'axios'

const request = axios.create()

export default request
至此，包目录基本完成，进入根目录安装typescript、eslint等公用的包。
1
pnpm add eslint @antfu/eslint-config typescript -Dw
并在项目根目录下新建.eslintrc.js文件，写入如下内容
1
2
3
4
5
process.env.ESLINT_TSCONFIG = 'tsconfig.json'

module.exports = {
extends: '@antfu',
}
再次输入pnpm install命令，为所有包安装依赖
进入packages/web目录，安装我们刚刚创建的request依赖
一种方式是进入子包进行安装，另一种方式是通过--filter来指定包名
1
pnpm -F @kklearn/web add @kklearn/request@\*
该命令表示在包名为@kklearn/web的包中安装@kklearn/request依赖。

接下来即可在@kklearn/web项目中使用该包

<script setup lang="ts">
import request from '@kklearn/request'
const hitokoto = ref<string>('')
async function reflush() {
  const result = await request.get('https://v1.hitokoto.cn')
  hitokoto.value = result.data.hitokoto
}
onMounted(() => reflush())
</script>

部署

调整根目录下的scripts，添加build命令构建所有包

{  
  "scripts": {
    "lint": "eslint . --fix",
    "build": "pnpm -F '@kklearn/*' build",
  }
}

下面只介绍了部分部署方式，如需要更多部署方式参考官方文档：

https://nuxt.com/docs/getting-started/deployment

部署到vercel

部署到Netlify

部署服务器

clone代码
使用pnpm进行安装包
pm2 start即可
项目端口号配置在ecosystem.config.js文件中，默认为8100