手写 Vue 源码 === 搭建 Monorepo 环境
目录
1.全局安装 pnpm
2.创建.npmrc 文件
.npmrc
设置 shamefully-hoist=true:
3.配置 workspace
4.环境搭建
5.初始化 TS
6.创建模块
7.开发环境esbuild打包
Monorepo 是管理项目代码的一个方式,指在一个项目仓库(repo)中管理多个模块/包(package)。 Vue3 源码采用 monorepo 方式进行管理,将模块拆分到 package 目录中。作为一个个包来管理,这样职责划分更加明确。
- 一个仓库可维护多个模块,不用到处找仓库
- 方便版本管理和依赖管理,模块之间的引用,调用都非常方便
Vue3 中使用pnpm
workspace
来实现monorepo
(pnpmopen in new window是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块)
1.全局安装 pnpm
npm install pnpm -g # 全局安装pnpm
pnpm init # 初始化配置文件
2.创建.npmrc 文件
.npmrc
.npmrc
是 npm 的配置文件,用于定义和管理 npm 的各种行为,比如:
-
设置私有 registry(注册源)
-
保存 token、认证信息
-
配置包的安装路径、缓存路径等
-
各种行为开关,如是否生成 package-lock.json
.npmrc
文件可以存在于不同级别:
位置 | 作用范围 |
---|---|
项目根目录下的 .npmrc | 仅影响当前项目 |
用户主目录(如 ~/.npmrc ) | 影响当前用户的所有项目 |
全局(如 /etc/npmrc ) | 影响所有用户 |
shamefully-hoist=true
是什么?
这是 pnpm(而非 npm) 的一个配置项,用于控制依赖的 hoisting(提升)方式。
默认行为(pnpm 默认):
-
pnpm 会把每个依赖安装在自己的隔离目录中,避免依赖污染。
-
这有助于防止 "依赖地狱",但某些依赖可能找不到自己需要的库(尤其是老旧的依赖)。
设置 shamefully-hoist=true
:
-
pnpm 会将所有依赖都提升到项目的
node_modules
根目录下。 -
这种方式 更像 npm 和 Yarn 的行为,兼容性好,但失去 pnpm 原本的隔离优势。。
shamefully-hoist = true
这里您可以尝试一下安装
Vue3
,pnpm install vue
此时默认情况下vue3
中依赖的模块不会被提升到node_modules
下。 添加羞耻的提升可以将 Vue3,所依赖的模块提升到node_modules
3.配置 workspace
新建 pnpm-workspace.yaml
pnpm-workspace.yaml
是 pnpm 用于管理 Monorepo 项目的配置文件。
它告诉 pnpm 哪些子项目