前端新工具--vite从入门到实战(一)
发布网友
发布时间：2024-10-03 21:17
共1个回答
热心网友
时间：2024-10-06 21:10
近期，尤雨溪在B站直播中介绍了一款名为vite的前端开发工具。这款工具利用了浏览器自带的import机制，使得无论项目大小，都能实现快速启动。我对源码进行了深入研究，并在《前端会客厅》节目中得到了尤大亲自讲解的设计思路，从而有了更深刻的感悟。
与尤大面对面交流vue3的设计思路，让我收获颇丰。最近，我也成为了vue3的contributor，希望能在下半年为vue生态贡献更多的代码。
补充实战
关于vite的实战操作，可以参考github上的vite项目：github.com/vitejs/vite
原理
接下来，我们来看一下vite的代码结构。它一如既往地保持精简风格。以index和main为例，它们利用了浏览器自带的import机制。当浏览器识别type="module"引入js文件时，内部的import会发起一个网络请求，尝试获取该文件。
为了演示方便，我们先清空main.js，然后在目录中新建util.js。此时，会出现一个小报错。vite的任务就是使用koa启动一个http服务，拦截这些请求并返回合适的结果。
支持html和js
我们先不啰嗦，先用简单的if else语句实现demo的功能。拦截路由/ 和xx.js结尾的请求，代码如下：
访问locaohost:3001，查看console和network，第一步搞定，支持了import底层的js文件。
通过以上步骤，你应该对vite为什么快有一个初步的认识。这是因为vite天生支持按需加载，告别了冗长的webpack打包过程。
第三方库
我们不能满足于此，因为不可能所有模块都自己编写。例如，我们使用的vue是从npm引入的，确切地说，是从node_module引入的。因此，我们需要修改main.js。
不出意外，会报错。我们需要解决两个问题：1. 不是合法的相对路径，浏览器报错；2. 无法解析import语句，因为路径不正确。
为了解决这个问题，我们需要对main.js中返回的内容进行重写，并添加一个规定：将import from后面不是上面三个符号开头的路径，加上/@module/前缀。
接下来，我们需要支持@module的前缀，解析url时添加一个判断即可。主要逻辑是去node_module中查找文件，并返回用rewriteImport包重写后的结果。
然后，会报一个错误，说明模块重写已完成。接下来，我们需要支持@module的前缀。
接下来，我们将讲解vite如何实现热更新，敬请期待。
