关于monorepo

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

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

创建项目

  1. 新建目录并初始化(项目名以kklearn为例)

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
    "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以上。

  3. 在项目根目录新建pnpm-workspace.yaml文件,并写入以下内容

    1
    2
    3
    packages:
    - 'libs/**'
    - 'packages/**'

    接下来后,我们的应用即创建在packages目录下。而libs目录则是存放一些公共的方法等内容。

  4. 创建子包

    至此,我们的主包基本搭建完成。其基本目录结构如下:

    1
    2
    3
    4
    ├── libs
    ├── package.json
    ├── packages
    └── pnpm-workspace.yaml

    接下来在packages中创建第一个应用,以Nuxt为例,进入packages目录执行pnpm dlx nuxi init web命令,来初始化一个项目名为web的项目。

  5. 修改刚刚创建的应用的包名

    1
    2
    3
    {
    "name": "@kklearn/web"
    }

    名称为@主包名/子包名

  6. 再来创建一个工具函数,例如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
  7. 至此,包目录基本完成,进入根目录安装typescripteslint等公用的包。

    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',
    }
  8. 再次输入pnpm install命令,为所有包安装依赖

  9. 进入packages/web目录,安装我们刚刚创建的request依赖

    一种方式是进入子包进行安装,另一种方式是通过--filter来指定包名

    1
    pnpm -F @kklearn/web add @kklearn/request@\*

    该命令表示在包名为@kklearn/web的包中安装@kklearn/request依赖。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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命令构建所有包

1
2
3
4
5
6
{  
"scripts": {
"lint": "eslint . --fix",
"build": "pnpm -F '@kklearn/*' build",
}
}

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

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

部署到vercel

image-20230212133222470

部署到Netlify

image-20230212133640872

部署服务器

  1. clone代码

  2. 使用pnpm进行安装包

  3. pm2 start即可

    项目端口号配置在ecosystem.config.js文件中,默认为8100