使用pnpm创建一个monorepo仓库
关于monorepo
简单来说monorepo就是将多个项目(有关联)放到一个仓库,其好处最明显的就是解决代码复用的问题和开发流程的统一。
至于更多关于monorepo管理方式,网上也有很多文章介绍,此文的主要目的是记录一下初始化过程。
创建项目
新建目录并初始化(项目名以
kklearn
为例)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
文件,并写入以下内容packages: - 'libs/**' - 'packages/**'
接下来后,我们的应用即创建在
packages
目录下。而libs
目录则是存放一些公共的方法等内容。创建子包
至此,我们的主包基本搭建完成。其基本目录结构如下:
├── libs ├── package.json ├── packages └── pnpm-workspace.yaml
接下来在
packages
中创建第一个应用,以Nuxt为例,进入packages
目录执行pnpm dlx nuxi init web
命令,来初始化一个项目名为web
的项目。修改刚刚创建的应用的包名
{ "name": "@kklearn/web" }
名称为
@主包名/子包名
再来创建一个工具函数,例如
Axios
在
libs
目录创建utils/request
目录,并创建文件夹index.ts
作为入口文件。并初始化一个package.json
文件。名称为@kklean/request
。安装
axios
,并在index.ts
中导出一个axios实例。import axios from 'axios' const request = axios.create() export default request
至此,包目录基本完成,进入根目录安装
typescript
、eslint
等公用的包。pnpm add eslint @antfu/eslint-config typescript -Dw
并在项目根目录下新建
.eslintrc.js
文件,写入如下内容process.env.ESLINT_TSCONFIG = 'tsconfig.json' module.exports = { extends: '@antfu', }
再次输入
pnpm install
命令,为所有包安装依赖进入
packages/web
目录,安装我们刚刚创建的request
依赖一种方式是进入子包进行安装,另一种方式是通过
--filter
来指定包名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