楔子

前段时间手写实现了一个简单的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服务