likes
comments
collection

实现了一个 mini vite

作者站长头像
站长
· 阅读数 12

朋友们好,笔者写了一个 mini-vite,实现了 Vite dev server 的基本功能,通过这个库可以降低大家看 Vite 源码的难度,在这个库里,只保留了最核心的逻辑。

具体的讲,目前具有以下特性:

  1. 与 Vite 尽量保持相同的文件名、目录名、函数名

  2. 支持加载 JS、TS、JS、TSX、CSS 文件,但是像 LESS 这样的预编译语言没有处理

  3. 支持通过 import 加载静态资源,如 import avatar from 'path/to/avatar.png'

  4. 支持从公共路径加载文件,就像我们有一个 vite.svg 放到了 public 目录,我们可以直接 /vite.svg 引用到它

  5. 支持预编译(pre-bundling)

最终的效果,可以把 Vite 的起手项目跑起来:

实现了一个 mini vite

这是仓库的地址:github.com/mysteryven/…

  1. 对这个仓库有兴趣的同学可以从 这个文件 看起。

  2. 如果你想了解预编译,可以从 这里 看。

  3. 如果你想了解 Vite 的插件系统,可以结合 这篇文章,同时,从代码 这里 开始看

  4. 如果想了解 Vite 是怎么处理 JS、CSS 请求的,可以看 这个中间件

  5. 如果你想了解 Vite 使用的中间件,可以从 这里 看,用途我也都进行了注释。

如果还有想了解但是我没有讲到的,可以在评论区留言。

事实上,还有挺多功能还没写的,比较重要的有 HMR、配置文件。未来的几周我会投入一部分时间在这个库上面,如果你感兴趣,不妨点一个 Star,我也将非常感谢。