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

简介: 【10月更文挑战第12天】Vue3源码架构简析及Monorepo流程构建

源码地址: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"
    ]
  }
}
相关文章
|
25天前
|
SQL 监控 关系型数据库
MySQL主从复制:构建高可用架构
本文深入解析MySQL主从复制原理与实战配置,涵盖复制架构、监控管理、高可用设计及性能优化,助你构建企业级数据库高可用方案。
|
19天前
|
数据采集 运维 监控
构建企业级Selenium爬虫:基于隧道代理的IP管理架构
构建企业级Selenium爬虫:基于隧道代理的IP管理架构
|
1月前
|
消息中间件 Java Kafka
Java 事件驱动架构设计实战与 Kafka 生态系统组件实操全流程指南
本指南详解Java事件驱动架构与Kafka生态实操,涵盖环境搭建、事件模型定义、生产者与消费者实现、事件测试及高级特性,助你快速构建高可扩展分布式系统。
157 7
|
1月前
|
监控 Java API
Spring Boot 3.2 结合 Spring Cloud 微服务架构实操指南 现代分布式应用系统构建实战教程
Spring Boot 3.2 + Spring Cloud 2023.0 微服务架构实践摘要 本文基于Spring Boot 3.2.5和Spring Cloud 2023.0.1最新稳定版本,演示现代微服务架构的构建过程。主要内容包括: 技术栈选择:采用Spring Cloud Netflix Eureka 4.1.0作为服务注册中心,Resilience4j 2.1.0替代Hystrix实现熔断机制,配合OpenFeign和Gateway等组件。 核心实操步骤: 搭建Eureka注册中心服务 构建商品
355 3
|
2月前
|
消息中间件 负载均衡 中间件
⚡ 构建真正的高性能即时通讯服务:基于 Netty 集群的架构设计与实现
本文介绍了如何基于 Netty 构建分布式即时通讯集群。随着用户量增长,单体架构面临性能瓶颈,文章对比了三种集群方案:Nginx 负载均衡、注册中心服务发现与基于 ZooKeeper 的消息路由架构。最终选择第三种方案,通过 ZooKeeper 实现服务注册发现与消息路由,并结合 RabbitMQ 支持跨服务器消息广播。文中还详细讲解了 ZooKeeper 搭建、Netty 集群改造、动态端口分配、服务注册、负载均衡及消息广播的实现,构建了一个高可用、可水平扩展的即时通讯系统。
246 0
|
3月前
|
存储 SQL 分布式计算
19章构建企业级大数据平台:从架构设计到数据治理的完整链路
开源社区: 贡献者路径:从提交Issue到成为Committer 会议演讲:通过DataWorks Summit提升影响力 标准制定: 白皮书撰写:通过DAMA数据治理框架认证 专利布局:通过架构设计专利构建技术壁垒
|
11天前
|
消息中间件 缓存 监控
中间件架构设计与实践:构建高性能分布式系统的核心基石
摘要 本文系统探讨了中间件技术及其在分布式系统中的核心价值。作者首先定义了中间件作为连接系统组件的"神经网络",强调其在数据传输、系统稳定性和扩展性中的关键作用。随后详细分类了中间件体系,包括通信中间件(如RabbitMQ/Kafka)、数据中间件(如Redis/MyCAT)等类型。文章重点剖析了消息中间件的实现机制,通过Spring Boot代码示例展示了消息生产者的完整实现,涵盖消息ID生成、持久化、批量发送及重试机制等关键技术点。最后,作者指出中间件架构设计对系统性能的决定性影响,
42 1
|
20天前
|
传感器 人工智能 算法
分层架构解耦——如何构建不依赖硬件的具身智能系统
硬件与软件的彻底解耦,并通过模块化、分层的架构进行重构,是突破这一瓶颈、构建通用型具身智能系统的核心基石。这种架构将具身智能系统解耦为三个核心层级:HAL、感知决策层和任务执行层。这一模式使得企业能够利用预置的技能库和低代码工具快速配置新任务,在不更换昂贵硬件的前提下,实现从清洁机器人到物流机器人的快速功能切换。本文将通过对HAL技术原理、VLA大模型和行为树等核心技术的深度剖析,并结合Google RT-X、RobotecAI RAI和NVIDIA Isaac Sim等主流框架的案例,论证这一新范式的可行性与巨大潜力,探讨硬件解耦如何将机器人从一个“工具”升级为“软件定义”的“多面手”,从而
175 3
|
5月前
|
人工智能 安全 Java
智慧工地源码,Java语言开发,微服务架构,支持分布式和集群部署,多端覆盖
智慧工地是“互联网+建筑工地”的创新模式,基于物联网、移动互联网、BIM、大数据、人工智能等技术,实现对施工现场人员、设备、材料、安全等环节的智能化管理。其解决方案涵盖数据大屏、移动APP和PC管理端,采用高性能Java微服务架构,支持分布式与集群部署,结合Redis、消息队列等技术确保系统稳定高效。通过大数据驱动决策、物联网实时监测预警及AI智能视频监控,消除数据孤岛,提升项目可控性与安全性。智慧工地提供专家级远程管理服务,助力施工质量和安全管理升级,同时依托可扩展平台、多端应用和丰富设备接口,满足多样化需求,推动建筑行业数字化转型。
193 5