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"
    ]
  }
}
相关文章
|
29天前
|
消息中间件 Java Kafka
Java 事件驱动架构设计实战与 Kafka 生态系统组件实操全流程指南
本指南详解Java事件驱动架构与Kafka生态实操,涵盖环境搭建、事件模型定义、生产者与消费者实现、事件测试及高级特性,助你快速构建高可扩展分布式系统。
108 7
|
2月前
|
消息中间件 负载均衡 中间件
⚡ 构建真正的高性能即时通讯服务:基于 Netty 集群的架构设计与实现
本文介绍了如何基于 Netty 构建分布式即时通讯集群。随着用户量增长,单体架构面临性能瓶颈,文章对比了三种集群方案:Nginx 负载均衡、注册中心服务发现与基于 ZooKeeper 的消息路由架构。最终选择第三种方案,通过 ZooKeeper 实现服务注册发现与消息路由,并结合 RabbitMQ 支持跨服务器消息广播。文中还详细讲解了 ZooKeeper 搭建、Netty 集群改造、动态端口分配、服务注册、负载均衡及消息广播的实现,构建了一个高可用、可水平扩展的即时通讯系统。
165 0
|
3月前
|
存储 SQL 分布式计算
19章构建企业级大数据平台:从架构设计到数据治理的完整链路
开源社区: 贡献者路径:从提交Issue到成为Committer 会议演讲:通过DataWorks Summit提升影响力 标准制定: 白皮书撰写:通过DAMA数据治理框架认证 专利布局:通过架构设计专利构建技术壁垒
|
5月前
|
人工智能 算法 网络安全
基于PAI+专属网关+私网连接:构建全链路Deepseek云上私有化部署与模型调用架构
本文介绍了阿里云通过PAI+专属网关+私网连接方案,帮助企业实现DeepSeek-R1模型的私有化部署。方案解决了算力成本高、资源紧张、部署复杂和数据安全等问题,支持全链路零公网暴露及全球低延迟算力网络,最终实现技术可控、成本优化与安全可靠的AI部署路径,满足企业全球化业务需求。
|
5月前
|
人工智能 安全 Java
智慧工地源码,Java语言开发,微服务架构,支持分布式和集群部署,多端覆盖
智慧工地是“互联网+建筑工地”的创新模式,基于物联网、移动互联网、BIM、大数据、人工智能等技术,实现对施工现场人员、设备、材料、安全等环节的智能化管理。其解决方案涵盖数据大屏、移动APP和PC管理端,采用高性能Java微服务架构,支持分布式与集群部署,结合Redis、消息队列等技术确保系统稳定高效。通过大数据驱动决策、物联网实时监测预警及AI智能视频监控,消除数据孤岛,提升项目可控性与安全性。智慧工地提供专家级远程管理服务,助力施工质量和安全管理升级,同时依托可扩展平台、多端应用和丰富设备接口,满足多样化需求,推动建筑行业数字化转型。
171 5
|
2月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
103 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
2月前
|
数据采集 存储 分布式计算
一文读懂数据中台架构,高效构建企业数据价值
在数字化时代,企业面临数据分散、难以统一管理的问题。数据中台架构通过整合、清洗和管理数据,打破信息孤岛,提升决策效率。本文详解其核心组成、搭建步骤及常见挑战,助力企业高效用数。
|
2月前
|
运维 安全 数据可视化
采用PHP+Vue技术架构的不良事件管理系统(源码)
本系统为医院安全(不良)事件管理工具,支持快速上报、流程化处理与多维度分析,助力识别风险、优化管理。采用PHP+Vue技术架构,功能涵盖事件上报、追踪整改、数据统计及PDCA改进等。
|
2月前
|
消息中间件 缓存 负载均衡
构建高效可扩展的后端架构:从设计到实现
本文探讨了如何构建高效、可扩展的后端架构,涵盖需求分析、系统设计、实现与优化全过程。内容包括微服务、数据库设计、缓存与消息队列等关键技术,并涉及API设计、自动化测试、CI/CD及性能优化策略,助力打造高性能、易维护的后端系统。

热门文章

最新文章