本文整理拓展自 Jinjiang 老师的分享 深入理解单文件组件编译,相关项目地址 vlite、vue-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。
编译前:
编译后:
2.2 $ vlite build
vlite 可以给每个源代码文件都额外生成一个可用的静态资源文件名。这样它们就可以输出为逐一对应的静态文件供 http-server 或 serve 使用。
2.3 $ vlite bundle
可以进一步将输出的静态文件打包成一个整体,内部使用了 rolldown(rolldown 是基于 Rust 且兼容 Rollup.js API 的打包工具,可查看 Vite's Next 2.2 进一步了解)。
三、Vlite 能力
- 零配置
- esm 友好
- 简洁直接的编译,支持 bundle
- 不需要安装 node_modules 依赖(引入的包会被重定向到 esm.sh)
- 支持 vue、react、vanilla
- 支持 typeScript、jsx、tsx
- 支持 css、scoped css