【Vue3源码】1.搭建Monorepo环境进行Vue3学习开发

在接下来一段时间里，我会努力学习 Vue3 源码，并将学习过程制作成文章，与大家一起手把手从 0 开始搭建 Vue3 框架，感兴趣或喜欢的朋友不妨点个赞或订阅一下我的频道，这将会是我更新的最大动力~

本文涉及技术名词

• Monorepo 一个管理项目代码的方式
• pnpm 速度更快、更高效的npm
• esbuild 打包工具，适合开发时使用
• webpack 打包工具，适合打包业务代码
• roll-up 打包工具，适合打包框架源码等（Vite也是基于roll-up）
• minimist 参数解析工具

介绍 Monorepo

Monorepo 是管理项目代码的一个方式，指在一个项目仓库 repo 中管理多个模块/包 package 。Vue3源码就是采用 monorepo 方式进行管理，将模块拆分到package目录中。

Monorepo 和其他结构的区别

Monorepo与普通的模块分组不同，普通的项目结构或分组参考 Monolith 或 Multi-repo看下图

不同项目结构之间的对比

如果要一个形象的比喻，可以这样来说：

Monorepo 就像玩积木一样由多个模块搭建起来，里面的每个功能模块都有标准的接口，即使从项目中抽离出去，也能独立使用

而 Monolith 就是一块铁板，无法将模块抽离，或者只有场景完全相同的情况下才适用

Monrepo 的优缺点

优点：

1. 代码复用非常简单
   高复用的代码，只需专门放在一个文件夹下，其他地方引用这个文件夹即可。通常我们命名为shared，具体如下图

更多关于 Monorepo 可以看这篇文章

正文 - 搭建 Monorepo 环境

ok，关于 monorepo 上面铺垫完了，下面开始冻手搭建环境！

Vue3中使用pnpm workspace来实现monorepo (pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块)

第一步 - 全局安装 pnpm

win + R打开命令小黑窗，输入下面命令全局安装 pnpm

npm install pnpm -g # 全局安装pnpm

安装完成后，找个位置建空文件夹，作为本次 Vue3源码学习全程的文件夹 ，在后续我会坚持把Vue3全套底层源码更新完，敬请期待~

第二步 - 项目初始化

用vscode打开空文件夹，并在终端里输入命令。此时目录中应有一个package.json

pnpm init -y # 初始化配置文件

第2.1步 ，为了使 pnpm 与npm 装包的行为一致，建立文件.npmrc，并在文件中写下

shamefully-hoist = true

第2.2步 ，下载vue3，在终端输入命令

pnpm install vue     

第三步 - 配置工作目录 workspace

第3.1步 ， 我们希望把所有的包都放在 packages 文件夹下进行管理（还未创建），
因此在目录下新建 pnpm-workspace.yaml 文件，并创建一个文件夹 packages

第3.2步 ，在 packages 文件夹下，创建两个文件夹分别为 reactivity，shared ，并各自创建一个文件夹 src ，最后各自创建一个 index.ts。有点绕对吧？看图一下明了。