vite+vue3+pnpm+monorepo搭建过程记录

前提

# 安装pnpm
npm install -g pnpm

目标项目结构

开始创建目录

目录的创建尽量使用脚手架，减少配置工作项

# 根目录创建
pnpm create vite

添加monorepo配置文件

pnpm-workspace.yaml具体配置参数

packages:
  # all packages or sub projects in direct subdirs of packages/
  - 'projects/*'
  # all packages in subdirs of components/
  - 'components/**'
  - 'apis/**'
  - 'utils/**'
  - 'mixins/**'
  - 'commom-libs/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

根目录就创建完成了

开始各枝干的搭建

# 创建compoments模块
pnpm create vite 

因为compoents属于vue所以这里需要选择vue

其它模块的创建同样的方式，只是名称不一致

projects就是一个文件夹，手动创建即可

到此，基本的骨架玖创建完了，稍后继续创建具体项目
先看一下，目前的项目结构

projects下的项目创建

这里根据实际业务需要创建具体项目即可

整体的项目骨架就搭建完毕，下面是最终的项目目录结构

删除各模块中不需要的文件

我这里删除了原本src下的不需要的文件，以及多余的index.html
然后新增测试文件，math.ts以及index.ts

math.ts文件内容

/**
 * 查找指定元素下标
 * @param data 需要查找的数组 
 * @param find 需要查找的元素
 * @returns 返回找到元素的下标，否则返回 -1
 */
export function indexOf(data: any[], find: any): number {
  const len: number = data.length;
  for (let i = 0; i < len; i++) {
    if (data[i] === find) {
      return i;
    }
  }
  return -1;
}

index.ts文件内容

import { indexOf } from './src/math'

export const mathUtils = {
    indexOf
}

在package.json中增加入口文件index.ts

"main": "index.ts",

同时修改一下package.json中的name参数，唯一
比如我的命名为: “@monorepo/utils”

{
  "name": "@monorepo/utils",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "index.ts",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  }
}

一个简单的utils模块就完成了
其它模块类似

在项目中引用各模块

各项目引用都一样，所以就以projectA引用utils，components模块为介绍

pnpm add @monorepo/utils

然后projectA的package.json就多增加了一行

"@monorepo/utils": "workspace:^0.0.0"

这个就表明已经引用到了我们自己的模块了
使用就和正常模块一样

以上就完成了utils模块的引入

接下来引入ompoments模块

项目中包管理工具请使用pnpm, 使用 pnpm install

简单定义一个组件

package.json文件

{
  "name": "@monorepo/components",
  "private": true,
  "version": "0.0.0",
  "main": "index.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11"
  }
}

项目引入

pnpm add @monorepo/components

项目中就增加了 "@monorepo/utils": "workspace:^0.0.0", 的相关依赖

{
 "name": "projecta",
 "private": true,
 "version": "0.0.0",
 "type": "module",
 "scripts": {
   "dev": "vite",
   "build": "vue-tsc && vite build",
   "preview": "vite preview"
 },
 "dependencies": {
   "@monorepo/components": "workspace:^0.0.0",
   "@monorepo/utils": "workspace:^0.0.0",
   "vue": "^3.2.45"
 },
 "devDependencies": {
   "@vitejs/plugin-vue": "^4.0.0",
   "typescript": "^4.9.3",
   "vite": "^4.0.0",
   "vue-tsc": "^1.0.11"
 }
}

具体使用正常组件导入一致

至此,关于项目中引入monorepo模块就完成了,其它则根据具体业务需要自行扩展
最重要的是将版本管理工具npm切换为pnpm使用

最后: 为避免忘记, 记录一下相关搭建过程