在浏览器中，把 Vite 跑起来了！

大家好，我是 ssh，前几天在推上冲浪的时候，看到 Francois Valdy 宣布他制作了 browser-vite[1]，成功把 Vite 成功在浏览器中运行起来了。这引起了我的兴趣，如何把重度依赖 node 的一个 Vite 跑在浏览器上星空注册?接下来，就和我一起探索揭秘吧。

简而言之的原理 Service Worker[2]：用来取代 Vite 的 HTTP 服务器。 Web Worker[3]：运行 browser-vite 来处理主线程。 文件系统被一个 in-memory 的模拟文件系统替代。 转换特殊扩展名 (.ts, .tsx, .scss…) 的导入。 遇到的挑战

没有真正的文件系统

Vite[4] 用文件系统完成了很多工作星空下载。读取项目的文件、监听文件改变、globs 的处理等等……在浏览器的模拟实现的内存文件系统中，这些就很难实现了，所以 browser-vite 删除了监听、globs 和配置文件来把复杂性降低。

项目文件被保存在内存文件系统中，所以 broswer-vite 和 vite plugins 可以正常处理它们。

没有 “node_modules”星空体育

Vite 依赖 node_modules 的存在来解析依赖。在启动时会把他们预打包(Dependencing Pre-Bundling)[5]来优化星空平台。

同样为了降低复杂度，所以 broswer-vite 非常小心的从 Vite 中删除了 node_modules 解析和依赖预打包。

所以使用 browser-vite 的用户需要创建一个 Vite plugin[6] 来解析裸模块导入。

正则表达式“后行断言”

Vite 中的一些代码用了后行断言[7]。在 Node.js 里没问题，但是 Safari 不支持星空官网。

所以作者重写了这些正则。

热更新(HMR)

Vite 用了 WebSockets[8] 来在服务端(node)和客户端(browser)之间同步代码变更。

在 browser-vite 中，服务端是 ServiceWorker + Vite worker，客户端是 iframe。所以作者把 WebSockets 切换成了对 iframe 使用 post message。

如何使用

截止本文撰写时间为止，这个工具还没有做到开箱即用，如果想使用的话，需要阅读很多 Vite 内部的处理细节。

如果感兴趣的话，可以保持关注 browser-vite’s README[9] 来获取最新的使用方式。

安装

安装 browser-vite npm 包。

$ npm install --save browser-vite 

或者

$ npm install --save vite@npm:browser-vite 

来将 "vite" 的 import 改写到 "browser-vite"

iframe - browser-vite 的窗口

需要一个 iframe 来显示由 browser-vite 提供的内部页面。

Service Worker - 浏览器内的 Web 服务器

Service Worker 会捕获到来自 iframe 的特定 url 请求。

一个使用 workbox[10] 的例子：星空注册

workbox.routing.registerRoute(   /^https?://HOST/BASE_URL/(/.*)$/,   async ({     request,     params,     url,   }: import('workbox-routing/types/RouteHandler').RouteHandlerCallbackContext): Promise<Response> => {     const req = request?.url 
星空体育 星空下载 星空注册