写了个辅助学习vite的小工具（mini-vite）

最新推荐文章于 2024-10-02 21:20:07 发布
最新推荐文章于 2024-10-02 21:20:07 发布
阅读量56 收藏
点赞数
分类专栏： 深入理解常见面试题，并结合源码使用回答 文章标签： 学习 前端 开源 github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ahunk/article/details/130972569
版权
作者创建了一个迷你版的vite仓库mini-vite，移除了不必要的代码和注释，为关键功能添加了注释，并提供了简易思维导图和debug配置。这个仓库专注于vite的常用功能，适合学习和理解vite源码。作者作为失业程序员，希望获得支持以缓解找工作的压力。
摘要由CSDN通过智能技术生成

话不多说先贴上仓库地址 mini-vite

看源码的几个问题

  • 封装的方法太多，不知道从哪个方法看起
  • 随便一个文件就是一两千行代码，看得头皮发麻
  • 不知道该怎么去debug，到底应该在哪个方法里面debug

没关系，这些问题在我这都能解决

我做了什么

移除了vite仓库中的所有注释和其他对于所要学习的vite功能用不上的方法，并为核心方法添加上了注释

image.png
为需要实现的核心功能画上了简易的思维导图

image.png
配置了debug功能，直接就能在代码内debug

image.png

本仓库只实现了vite比较常用的几个功能，后续在vite的学习中，我可能也会不断的往mini-vite里面加上新功能

失业程序员待业中，希望大家能给几个star，让我能找工作稍微轻松点，毕业一年，年限卡的死死的，面试都没几个，谢谢大家了

再次贴上仓库地址 mini-vite

参考

lyk990
关注
专栏目录
【愚公系列】《AIGC辅助软件开发》015-AI辅助前端编程：利用 ChatGPT 写代码
时光隧道
07-27 1万+
在数字化时代的浪潮中，前端开发面临着日益增长的挑战与机遇。随着用户对网站与应用体验的要求不断提高，开发者们需要更高效、更智能的工具来提升工作效率。近期，人工智能技术的迅猛发展为这一领域带来了新的变革，尤其是像 ChatGPT 这样的 AI 模型，成为了开发者的得力助手。本文将探讨如何利用 ChatGPT 来辅助前端编程，从代码生成到问题解决，我们将分享实际案例与技巧，帮助你在开发过程中事半功倍。无论你是前端开发的新手，还是经验丰富的工程师，相信这篇文章都能为你提供新的视角与灵感。
Webpack 开发/学习
hujian66的博客
11-15 64
Webpack开发学习记录.
2、vue、webpack、vite、pinia
旺旺
10-02 501
vue3的diff算法没有vue2的头尾、尾头之间的diff，对diff算法进行了优化，最长递归子序列。
小满Vue3第三十九章（Vue开发桌面程序Electron）
热门推荐
qq1195566313的博客
07-30 2万+
Electron官网我们用的VsCode也是electron开发的electron内置了Chromium和nodeJS其中Chromium是渲染进程主要渲染和解析HTML，Nodejs作为主进程，其中管道用IPC通信。
基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建
zhanghuaiwei
06-27 1143
基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建
微信小程序入门（四）：miniprogram-ci + Jenkins + git 实现小程序代码的上传等操作
sulia1234567890的博客
09-06 2594
目录 1. 实现要求 2. 实现方式一 2.1 Jenkins中其他配置这里不重复了，重点说构建部分的命令 2.2 jenkins中构建运行任务，小程序页面检查上传结果，没问题。 3. 实现方式二 3.1 在Jenkins命令行（Windows批处理命令），用miniprogram-ci命令实现，参数化某些选项的方式 3.2 参数化详解 3.3 注意事项 3.4远程触发（带参数） 3.5 邮件设置 4. 实现方式三 4.1 在jenkins命令行（Windows 批处理命令），.
webpack.........
m0_52289188的博客
03-16 141
注意必须配置完webpack.config.js才可以直接使用npx webpack，否则npx webpack ./src/main.js --mode=development 需要告诉全。webpack是一个静态资源打包工具，浏览器只可以处理js代码，甚至稍微高版本js代码都处理不了，webpack本身功能很少需要配置一些loader或pluging来扩展功能。首先添加css资源引入main.js才可以打包，public下整个界面，引入打包好的main.js。2.自动引用可以解决依赖冲突，命名问题。
尚硅谷webpack课程学习笔记
MissXu666的博客
09-20 1033
3、我们之前打包执行的是npx webpack ./src/main.js --mode=development 这个命令，写了webpack的配置文件中设置了入口后，可以直接使用npx webpack 执行了。引入的是打包后的文件，如果更改入口起点的名称，或者添加一个新的入口，那么会在构建时重新命名生成的 bundle，但是 index.html 仍然在引用旧的名称！2、创建基本的mani.js 文件、src、public文件、写入es6 模块化语法，报错，浏览器无法识别。
webpack学习笔记
kianagrow的博客
06-26 272
webpack 是前端项目工程化的具体解决方案，它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
如何使用vite-svg-loader
02-23
Vite-SVG-Loader 是一个轻量级的插件，专门用于在 Vite 项目中引入 SVG 图像。使用这个插件，可以轻松地引入 SVG 图像，并且可以像使用 Vue 组件一样来使用它们。 下面是使用 Vite-SVG-Loader 的基本步骤： 1. ...
vite-plugin-html-template:用于Vite的html模板，例如用于Webpack的HtmlWebpackPlugin
04-07
vite-plugin-html-template 用于ViteHTML模板，例如用于Webpack的HtmlWebpackPlugin 动机 Vite需要html作为入口文件，这意味着对于SPA我们必须具有projectRoot / index.html，对于MPA必须具有projectRoot / src / ...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
立即使用Vite 无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多...
vite-plugin-ssr-ssg:适用于SSR和SSG的Vite插件
03-25
vite-plugin-ssr-ssg 适用于跨框架SSR和SSG的Vite插件 :sparkles: 特征 声明式入口点 适用于跨框架的简单命令 方便的设置脚本 自动页面生成 在SSR和CSR中预览 :dizzy: 快速开始 在您的项目中 yarn add -D vite-...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
Go基础学习08-并发安全型类型-通道（chan）深入研究
FLJS_T的博客
09-28 884
在前面学习中了解到对于单值变量，如：int、string；多值变量，如：map存在多协程对资源竞争的并发问题，为了解决并发性通常需要引入sync.Mutex解决。>对于通道的基本声明方式有三种：声明并初始化带缓冲的通道（ch1）；声明并初始化一个不带缓冲的通道（ch2）；仅仅声明一个通道（ch3） >什么是通道：==一个通道相当于一个先进先出（FIFO）的队列。也就是说，通道中的各个元素值都是严格地按照发送的顺序排列的，先被发送通道的元素值一定会先被接收。Select和for循环实现对channel的多次选
10.2学习
最新发布
2401_87363162的博客
10-02 1102
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
6.824 Lab 2C 学习记录
kingsill的博客
09-29 309
最后10s，开始的时候，恢复网络，插入一个数据，等待这个数据被提交，如果超过这10s就报错。2C的test中的unreliable figure8算是给博主的迎头一棒，需要根据raft论文的figure8进行解决，leader。根据前任及博主自己的经验，unreliable figure8的除了上述这一点以外，需要对。博主由于之前的不严谨，给自己留下了很大的改进困难，最后不得不重构代码。进行一定的设计，可以参考课程里老师提出的意见。一下为博主的github仓库，需要的可以参考。有一定的考验，那么就需要对。
Elasticsearch学习笔记(2）
m0_74293254的博客
09-28 1201
创建索引: 使用 PUT 请求来定义索引及其映射。创建文档: 使用 POST 请求将数据添加到索引。读取文档: 使用 GET 请求获取特定文档。更新文档: 使用 POST 加上 _update 操作来修改现有文档。删除文档: 使用 DELETE 请求删除指定文档。删除索引: 使用 DELETE 请求删除整个索引。请求方式：POST请求格式：/{索引库名}/_doc/文档id示例：POST /my_index/_doc/1 { "field": "value" }
vite-vue3-lowcode
08-04
vite-vue3-lowcode是一种低代码开发工具，它基于Vite和Vue 3技术栈，旨在帮助开发者快速构建Web应用程序。低代码开发是一种开发方式，通过可视化界面和预定义组件，开发者可以简化应用程序的开发过程，减少手动编写代码的时间和工作量。 vite-vue3-lowcode提供了丰富的可视化组件库，开发者可以通过拖拽和配置的方式进行页面设计，无需编写大量的代码。它支持快速构建常见的布局、表单、图表等功能，减少了开发者的重复劳动，提高了开发效率。 此外，vite-vue3-lowcode还提供了动态表单生成和数据绑定功能，可以根据数据库和API的模式自动生成表单，并与后端数据进行双向绑定。这使开发者可以更轻松地构建数据驱动的应用程序，实现前后端的数据交互。 vite-vue3-lowcode还支持自定义组件的开发和集成，开发者可以根据自己的需求自定义新的组件，并将其集成到应用程序中。这为开发者提供了更大的灵活性和自由度，可以根据实际需求进行定制化开发。 总结来说，vite-vue3-lowcode是一个功能强大的低代码开发工具，它通过可视化界面、预定义组件和数据绑定功能，帮助开发者快速构建Web应用程序。它不仅提供了丰富的功能和组件库，还支持自定义组件的开发和集成，满足了各种不同场景下的开发需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值