• 首页
  • 产品中心
  • 铝材镀镍
  • 图片展示
  • 新闻中心
  • 产品中心

    你的位置:开元ky888棋牌登录娱乐 > 产品中心 > 在浏览器中,把 Vite 跑起来了!

    在浏览器中,把 Vite 跑起来了!

    发布日期:2022-08-07 01:51    点击次数:82

    巨匠好,我是 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