Vue3源码架构简析及Monorepo流程构建

源码地址：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"
    ]
  }
}