背景
有一天下午，小明打开某软件，想帮HR刷一下KPI：
面试官：了解过monorepo吗？
：额，额额...
小明886！！！
了解一下，至少到时候还能侃几句，至少有个印象，那么下面plz👇
👇
👇
👇
monorepo
monorepo字面意思是由mono和repo组成的，mono(monolithic)的意思：独立的，单一的，整体的；repo（repository）的意思是：仓库。
注释：monorepo这个工具用来管理多个不同项目的单一库，项目与项目之间可能有相关联系，但是逻辑又是独立互不影响。
前端
Monorepo这个东西其实本质上来说，就是指的是将『一个项目的所有前端代码存储在一个统一的代码仓库中』的开发的模式。
传统的一般的前端开发，就是一个项目去npm去下载不同的库来辅助主项目，而npm中的单个库都是独立的代码仓库，当需要安装的npm包越来越多的时候，我们需要去各个仓库里面维护管理多个独立的库就变得越来越困难，越来越庞大。
那么monorepo就是思想就是，将多个应用程序、库和模块组织在同一个代码仓库里，使用统一的版本控制系统进行管理。
常见的monorepo工具框架
- Lerna
- nx
- Yarn Workspaces
- ...
这些工具提供了管理monorepo结构，流程为：安装、构建、发布，提高了开发效率和代码质量。
接下来用一个案例项目来解说一下。
项目解说
1、首先创建一个pnpm-workspace-monorepo文件夹；
2、确保安装了包管理工具pnpm；
3、在项目文件目录下执行pnpm init；
4、去pnpm官方文档，复制一段配置过来到项目根目录（根目录创建一个pnpm-workspace.yaml文件）；
这个文件做什么用的呢？
这个pnpm-workspace.yaml是：
（1）、用来定义workspace工作空间的根目录的；
（2）、从这个workspace工作空间中包含/排除某些目录（默认情况是包含所有子目录）；
5、去api文件下下载一个axios
安装pnpm add axios;
分别新建base.js,user.js,index.js.
// 封装axios的base.js
import axios from 'axios';
let Axios = axios.create({
baseURL: '/',
})
export default Axios;å
// user.js 请求接口
import Axios from "./base";
export const getUser = (data) => Axios.get(data);
// index.js
export * from './user'; // user.js里面的东西全暴露出来为*
6、在packages目录下，创建一个vue项目；
npm create vite去跑，
7、跨项目安装依赖包
在vite-project项目下面，下载刚刚我们单独一个文件夹做的api的包，
第一种安装方法：
pnpm add @test/api
第二种安装方法：
在package.json的开发依赖里面这样写：
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.0",
"@test/api": "workspace:*" // 直接在引用里面写然后指定为`workspace:*`
}
}
至于这里的"@test/api": "workspace:*"的的意思就是说，指定依赖项是从这个工作区里面去找的那个包，安装过来，平常一般我们这里的话就是写版本号嘛，
但是monorepo这里就是无论啥版本，去安装现在工作区(workspace)里面的这个@test/api的现有版本，不需要每次都去手动更改依赖项的版本号这个意思。
pnpm install 一下，就可以看到vite-project的vue项目就有这个api的包了。
8、在项目里面引入公共包
在上一步骤做完之后，就安装完成了，然后就可以在项目中引用去使用：
<template>
vue3 + vite
</template>
<script setup lang="ts">
import { getUser } from '@test/api';
console.log(getUser)
</script>
打印出来如下：
说明已经在项目中引入公共包是，引入成功了，最后就可以在页面中调用接口去请求数据那些了。
9、编译打包运行到服务器上
npm run build
得到dist文件夹，最后用vscode插件live-server本地服务器跑起来。
完成！
