Vlite

73 阅读1分钟

本文整理拓展自 Jinjiang 老师的分享 深入理解单文件组件编译,相关项目地址 vlitevue-simple-compiler

一、Vlite 是什么

vlite 是支持 typeScript、tsx、jsx、vue、react、vanilla 的静态服务器,专为 demo / 组件设计的静态服务器,使用方法类似 http-server 或 serve,设计灵感来自 vite

二、Vlite 原理

2.1 $ vlite

当浏览器请求一个单文件组件时, 服务器会将其编译为一个 ES 模块(vue 调用 vue-simple-compiler 编译)。react demo 如下,vue demo 可见 jinjiang 老师的分享 深入理解单文件组件编译 p58~59。

编译前: image.png 编译后: image.png

2.2 $ vlite build

vlite 可以给每个源代码文件都额外生成一个可用的静态资源文件名。这样它们就可以输出为逐一对应的静态文件供 http-server 或 serve 使用。

image.png

2.3 $ vlite bundle

可以进一步将输出的静态文件打包成一个整体,内部使用了 rolldown(rolldown 是基于 Rust 且兼容 Rollup.js API 的打包工具,可查看 Vite's Next 2.2 进一步了解)。

image.png

三、Vlite 能力

  • 零配置
  • esm 友好
  • 简洁直接的编译,支持 bundle
  • 不需要安装 node_modules 依赖(引入的包会被重定向到 esm.sh)
  • 支持 vue、react、vanilla
  • 支持 typeScript、jsx、tsx
  • 支持 css、scoped css