源码地址：https://github.com/vuejs/core
Vue3架构分析
Vue3采用Monorepo方式管理代码，其核心为packages文件夹
packages内存放着功能独立的各种依赖
Vue3项目结构
- reactivity: 响应式系统
- runtime-core: 与平台无关的运行时核心 (可以创建针对特定平台的运行时 - 自定义渲染器)
- runtime-dom: 针对浏览器的运行时。包括
DOM API，属性，事件处理等 - runtime-test: 用于测试
- server-renderer: 用于服务器端渲染
- compiler-core: 与平台无关的编译器核心
- compiler-dom: 针对浏览器的编译模块
- compiler-ssr: 针对服务端渲染的编译模块
- compiler-sfc: 针对单文件解析
- size-check: 用来测试代码体积
- template-explorer：用于调试编译器输出的开发工具
- shared： 多个包之间共享的内容
- vue: 完整版本,包括运行时和编译器
Monorepo介绍
Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)
- 一个仓库可维护多个模块，不用到处找仓库
- 方便版本管理和依赖管理，模块之间的引用，调用都非常方便
缺点：仓库体积会变大。
构建Monorepo项目环境
Monorepo（单一代码库）模式越来越受到欢迎，尤其是在大型项目中。使用 Monorepo，可以在一个仓库中管理多个项目或包，从而简化依赖管理和代码共享。结合 Vue 3，这种模式可以极大地提高开发效率和代码复用性。
为什么选择 Monorepo
- 依赖管理：在一个仓库中管理所有依赖，避免版本冲突和重复安装。
- 代码共享：轻松共享和复用代码，减少重复开发。
- 一致性：统一的代码风格、配置和工具链，确保项目的一致性。
- 协作：简化团队协作，所有代码变更集中在一个地方。
目录构建及workspace配置
仿照Vue3，建立依赖管理packages文件夹、先进行reactivity和shared两个模块的开发，然后初始化仓库。
// workspaces在npm7以上才可以使用，因此，我们使用yarn来构建项目
yarn init -y
vue3-study
│ package.json
├─packages # 多个repo
│ └─reactivity
│ │ package.json
│ └─src
│ index.ts
│ └─shared
│ │ package.json
│ └─src
│ index.ts
在根目录中的package.json中进行workspaces改造
{
"name": "vue3",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
+"private":true,
+"workspaces":[
"packages/*"
],
}
然后，更改子包的名称。
// reactivity/package.json
{
"name": "@vue/reactivity",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
// shared/package.json
{
"name": "@vue/shared",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
现在，当我们安装依赖时，shared和reactivity就会以快捷方式的形式被放在node_modules里供我们全局引入使用。（我们子包名是@vue开头，所以都会被放在这个文件夹下）
yarn install
依赖安装
我们使用typescript开发项目、rollup进行打包，因此，需要在根目录下的package.json安装相关依赖
yarn add typescript rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-json execa -D -W
workspace模式下，安装依赖，需要额外添加-W参数
相关依赖说明：
| 依赖 | ** |
|---|---|
| typescript | 支持typescript |
| rollup | 打包工具 |
| rollup-plugin-typescript2 | 使项目支持使用TS来进行开发，插件执行时会默认读取tsconfig.json配置。 |
| @rollup/plugin-node-resolve | 解析node第三方模块 |
| @rollup/plugin-json | 可以将.json文件转为es6模块供rollup处理。 |
| execa | execa是可以调用shell和本地外部程序的javascript封装 |
创建tsconfig.json配置文件
npx tsc --init // 注意在根目录下执行命令
workspace配置
npm init -y && npx tsc --init
{
"private":true,
"workspaces":[
"packages/*"
]
}
目录结构配置
C:.
│ package.json # 配置运行命令
│ rollup.config.js # rollup配置文件
│ tsconfig.json # ts配置文件 更改为esnext
│ yarn.lock
│
├─packages # N个repo
│ └─reactivity
│ │ package.json
│ └─src
│ index.ts
│
└─scripts # 打包命令
build.js
配置模块名称及打包选项
{
"name": "@vue/reactivity",
"version": "1.0.0",
"description": "",
"main": "index.js",
"module": "dist/reactivity.esm-bundler.js",
"author": "",
"license": "ISC",
"buildOptions":{
"name":"VueReactivity",
"formats":[
"esm-bundler",
"cjs",
"global"
]
}
}
