Vite源码学习--调试源码

news2024/10/7 14:23:21
简介

当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

调试过程
1、环境准备

编辑器使用vscode

使用npm或yarn创建一个Vue的调试项目,项目创建好了就完成环境的准备了。

npm init vite@latest <project-name>
2# 或者
3yarn create vite <project-name>
2、准备调试

我们需要修改package.json文件

image.png

image.png

然后点击DeBug,然后再点击上面弹窗的dev --debug就可以启动Vite源码调试了。

image.png

3、vite的目录结构

通过上面的步骤,我们已经启动了vite源码调试了,但是我们没有打断点,也起不到调试的作用。
下面先看看源码调试的入口文件。

入口文件

我们学习源码一般都先看源码的package.json,文件node_modules\vite\package.json,执行vite命令的入口,bin/vite.js

image.png

在bin/vite.js的start函数了打个断点,确实进入了start函数,start函数里面引入了/dist/node/cli.js文件模块,
image.png

然后我们进入/dist/node/cli.js文件,阅读源码,我们启动的是dev 命令,应该会进入dev相关的脚本里面,会调用createServer函数,创建本地服务器。

image.png

总结

这一篇博客主要讲解了vite怎么进行源码调试,接下来我会带着大家进一步学习vite预构建,资源编译,请求拦截,热更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1573855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

接口日志表结构

表&#xff1a;ZTALL_IFLOG MANDT MANDT CLNT 3 0 0 客户端 UUID SYSUUID_C32 CHAR 32 0 0 16-byte UID in 32 chars (hexadecimal) IFSNR ZE_IFSNR CHAR 30 0 0 接口编号(系统ID流水号) FUNCNAME RS38L_FNAM CHAR 30 0 0 功能模块的名称 STATUS BAPI_MTYPE CHAR 1 0 0 消息类…

【计算机毕业设计】电影购票系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

linux--进程创建

执行了3次ps -f ,ps -f的父进程的ID(PPID)都是一样的,即bash. 实际上Linux上这个bash就是不断的复制自身,然后把复制出来的用exec替换成想要执行的程序(比如ps); 运行ps,发现ps是bash的一个子进程;原因就是bash把自己复制一份,然后替换成ps; 替换,这里就体现了写时拷贝的意义,…

学习vue3第十四节 Teleport 内置组件介绍

<Teleport></Teleport> 作用目的&#xff1a; 用于将指定的组件或者元素传送到指定的位置&#xff1b; 通常是自定义的全局通用弹窗&#xff0c;绑定到 body 上&#xff0c;而不是在当前元素上面&#xff1b; 使用方法&#xff1a; 接收两个参数 to: 要将目标传…

Ceph学习 - 1.存储知识

文章目录 1.存储基础1.1 基础知识1.1.1 存储基础1.1.2 存储使用 1.2 文件系统1.2.1 简介1.2.2 数据存储1.2.3 存储应用的基本方式1.2.4 文件存储 1.3 小结 1.存储基础 学习目标&#xff1a;这一节&#xff0c;我们从基础知识、文件系统、小节三个方面来学习。 1.1 基础知识 1.…

Qt中的网络通信

C没有封装专门的网络套接字的类&#xff0c;因此C只能调用C对应的API&#xff0c;而在Linux和Windows环境下的API都是不一样的 Qt作为一个C框架提供了相关封装好的套接字通信类 在Qt中需要用到两个类&#xff0c;两个类都属于network且都是属于IO操作&#xff0c;只不过这两个类…

第十四届蓝桥杯C/C++大学B组题解(一)

1、日期统计 #include <bits/stdc.h> using namespace std; int main() {int array[100] {5, 6, 8, 6, 9, 1, 6, 1, 2, 4, 9, 1, 9, 8, 2, 3, 6, 4, 7, 7,5, 9, 5, 0, 3, 8, 7, 5, 8, 1, 5, 8, 6, 1, 8, 3, 0, 3, 7, 9,2, 7, 0, 5, 8, 8, 5, 7, 0, 9, 9, 1, 9, 4, 4, 6,…

Golang | Leetcode Golang题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; func myAtoi(s string) int {abs, sign, i, n : 0, 1, 0, len(s)//丢弃无用的前导空格for i < n && s[i] {i}//标记正负号if i < n {if s[i] - {sign -1i} else if s[i] {sign 1i}}for i < n && s[i] >…

DFS序列

什么是DFS序 DFS序是指对一棵树进行DFS时&#xff0c;每个节点被访问到的顺序。DFS序分成两个部分&#xff1a;进入该节点的顺序和退出该节点的顺序。 如何求DFS序 对于DFS中当前节点 1&#xff1a;计数 2&#xff1a;进入当前节点的顺序等于当前计数 3&#xff1a;想所有…

阿里云可观测 2024 年 3 月产品动态

本月可观测热文回顾 文章一览&#xff1a; 全新架构&#xff01;日志服务 SLS 自研免登录方案发布 AIOps 智能运维&#xff1a;有没有比专家经验更优雅的错/慢调用分析工具&#xff1f; 一文看懂如何做好 SQL 质量监控 使用 SPL 高效实现 Flink SLS Connector 下推 功能快…

pandas用法-详解教程

pandas用法-详解教程 一、生成数据表二、数据表信息查看三、数据表清洗四、数据预处理五、数据提取六、数据筛选七、数据汇总八、数据统计九、数据输出 一、生成数据表 1、首先导入pandas库&#xff0c;一般都会用到numpy库&#xff0c;所以我们先导入备用&#xff1a; impor…

深度学习理论基础(六)Transformer多头注意力机制

目录 一、自定义多头注意力机制1. 缩放点积注意力&#xff08;Scaled Dot-Product Attention&#xff09;● 计算公式● 原理 2. 多头注意力机制框图● 具体代码 二、pytorch中的子注意力机制模块 深度学习中的注意力机制&#xff08;Attention Mechanism&#xff09;是一种模仿…

docker基础学习指令

文章目录 [toc] docker基础常用指令一、docker 基础命令二、docker 镜像命令1. docker images2. docker search3. docker pull4. docker system df5. docker rmi1. Commit 命令 三、 docker 容器命令1. docker run2. docker logs3. docker top4. docker inspect5. docker cp6. …

Mybatis报错:Unsupported conversion from LONG to java.sql.Timestamp

Mybatis在封装结果集的时候&#xff0c;如果方法返回的是对象&#xff0c;则会去调用这个对象的无参构造方法。 如果实体类标注了Builder注解&#xff0c;则此注解会把默认的构造方法全部改成私有的&#xff0c;则Mybatis在通过无参构造方法反射创建对象时&#xff0c;就会找不…

#QT项目实战(天气预报)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a; 3.记录&#xff1a; &#xff08;1&#xff09;调用API的Url a.调用API获取IP whois.pconline.com.cn/ipJson.jsp?iphttp://whois.pconline.com.cn/ipJson.jsp?ip if(window.IPCallBack) {IPCallBack({"ip":&quo…

Python学习之-魔术方法

前言&#xff1a; Python 中的魔术方法&#xff08;Magic Methods&#xff09;&#xff0c;也称作特殊方法&#xff08;Special Methods&#xff09;&#xff0c;是那些被双下划线包围的方法&#xff0c;例如 init。这些方法在 Python 中有特殊的含义&#xff0c;它们并不需要…

ThingsBoard通过MQTT发送遥测数据

MQTT基础 客户端 MQTT连接 遥测上传API 案例 MQTT基础 MQTT是一种轻量级的发布-订阅消息传递协议&#xff0c;它可能最适合各种物联网设备。 你可以在此处找到有关MQTT的更多信息&#xff0c;ThingsBoard服务器支持QoS级别0&#xff08;最多一次&#xff09;和QoS级别1&…

程序猿成长之路之数据挖掘篇——频繁项集挖掘介绍

频繁项集挖掘可以说是数据挖掘中的重点&#xff0c;下面我们来分析以下频繁项集挖掘的过程和目标 如果对数据挖掘没有概念的小伙伴可以查看上次的文章 https://blog.csdn.net/qq_31236027/article/details/137046475 什么是频繁项集&#xff1f; 在回答这个问题之前&#xff…

蓝桥杯第101题 拉马车 C++ Java Python

目录 题目 思路和解题方法 复杂度: c 代码 Java 版本&#xff08;仅供参考&#xff09; Python 版本&#xff08;仅供参考&#xff09; 代码细节 C 版本: Java 版本: Python 版本: 题目 思路和解题方法 这个游戏是一个简单的纸牌游戏&#xff0c;两个玩家轮流出牌&am…

Springboot相关知识-图片描述(学习笔记)

学习java过程中的一些笔记&#xff0c;觉得比较重要就顺手记录下来了~ 目录 一、前后端请求1.前后端交互2.简单传参3.数组集合传参4.日期参数5.Json参数6.路径参数7.响应数据8.解析xml文件9.统一返回类10.三层架构11.分层解耦12.Bean的声明13.组件扫描14.自动注入 一、前后端请…