Skip to content

classmatewu/ToyVite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

楔子

前段时间手写实现了一个简单的Webpack——ToyWebpack,webpack虽然强大稳定,霸占前端打包工老大哥的位置已经有多年了,但是前端 社区苦其复杂配置、晦涩文档、以及令人闻风丧胆的打包速度、且虽项目越大而越慢等问题久矣,便开始探寻新的打包方式——bundless。 也就是没有bundle打包产物,而是直接利用主流浏览器基本都支持的esm模块方式,可以说是直接跳过了打包过程,少整了那么多中间活, 那速度当然杠杠的快了。

bundless工具代表

  • snowpack:几乎是第一款提出bundless思想的工具,vite1.0也是借鉴的它的思路实现的,但可惜前段时间作者宣布不维护了,交给社区
  • vite:尤大深夜偶发灵感作,适用各大主流前端框架甚至原生的js开发构建,深受前端社区开发者的喜爱

这里可能就有个疑问?纳尼,用的是浏览器支持的esm模块方式,都不用打包了,那还需要这些工具干啥?一脸蒙蔽? 问题的关键在于,浏览器虽然支持esm模块方式,但这种方式是有限的:

  • 首先它只支持js、html、css等文件类型,对于一些类型文件,呵呵,高傲的浏览器表示不认识,我才不屑于去认识你。 这便是这些工具做的第一件事情,将其他文件例如.vue文件,转为js、html、css这些浏览器认识的文件类型
  • 其次便是路径问题,例如我们写import vue from 'vue'时,想让浏览器会向服务器发起一个请求拿到vue文件库,但是抱歉, 咱们高傲的浏览器小公主文化有限,不认识这种裸模块的esm路径方式,只认识/./../这三种路径方式,所以需要有工具来将这些 路径给DFS转换一下,让这位高傲的浏览器公主可以识别,进而发起一个http请求,向服务器请求这份文件,以及它的依赖的依赖的依赖...
  • 以及优化,例如对依赖的库文件进行预编译与强缓存,对我们书写的代码进行协商缓存等等
  • 还有others,笔者也正在学习中,总之就是牛逼,yyds

手写实现一个迷你的Vite——ToyVite

所以,笔者怀着一颗敬畏的心,在参考了一些教程之后,尝试自己实现一下当下火热的vite,通过这种方式来加深对这些bundless工具的理解。

思路

  • 利用koa,启一个http server
  • 利用babel,将所有的import路径改为/./../这三种路径方式
  • 编译.vue文件,返回对应的html、js、css文件
  • 添加预编译功能,对依赖库文件进行强缓存,对我们编写的代码进行协商缓存
  • 。。。规划中

废话不多说,开干!

启动

  • npm i:安装依赖
  • npm run dev:利用nodemon启动koa服务

About

手写实现一个迷你的Vite

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published