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

浅沫记忆

首发于公众号前端从进阶到入院，欢迎关注。

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

  

• Service Worker：用来取代 Vite 的 HTTP 服务器。
    
  
• Web Worker：运行 browser-vite 来处理主线程。
    
  
• 文件系统被一个 in-memory 的模拟文件系统替代。
    
  
• 转换特殊扩展名 (.ts, .tsx, .scss…) 的导入。
  
  

遇到的挑战
没有真正的文件系统
Vite 用文件系统完成了很多工作。读取项目的文件、监听文件改变、globs 的处理等等……在浏览器的模拟实现的内存文件系统中，这些就很难实现了，所以 browser-vite 删除了监听、globs 和配置文件来把复杂性降低。
项目文件被保存在内存文件系统中，所以 broswer-vite 和 vite plugins 可以正常处理它们。
没有 “node_modules”
Vite 依赖 node_modules 的存在来解析依赖。在启动时会把他们预打包（Dependencing Pre-Bundling）来优化。
同样为了降低复杂度，所以 broswer-vite 非常小心的从 Vite 中删除了 node_modules 解析和依赖预打包。
所以使用 browser-vite 的用户需要创建一个 Vite plugin 来解析裸模块导入。
正则表达式“后行断言”
Vite 中的一些代码用了后行断言。在 Node.js 里没问题，但是 Safari 不支持。
所以作者重写了这些正则。
热更新（HMR）
Vite 用了 WebSockets 来在服务端（node）和客户端（browser）之间同步代码变更。
在 browser-vite 中，服务端是 ServiceWorker + Vite worker，客户端是 iframe。所以作者把 WebSockets 切换成了对 iframe 使用 post message。
如何使用
截止本文撰写时间为止，这个工具还没有做到开箱即用，如果想使用的话，需要阅读很多 Vite 内部的处理细节。
如果感兴趣的话，可以保持关注 browser-vite’s README 来获取最新的使用方式。
安装
安装 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 的例子：

workbox.routing.registerRoute(
  /^https?:\/\/HOST/BASE_URL\/(\/.*)$/,
  async ({
  request,
  params,
  url,
  }: import('workbox-routing/types/RouteHandler').RouteHandlerCallbackContext): Promise<Response> => {
  const req = request?.url || url.toString();
  const [pathname] = params as string[];
  // send the request to vite worker
  const response = await postToViteWorker(pathname)
  return response;
  }
);

大多数情况下，对 "Vite Worker" 发送消息用的是 postMessage 和 broadcast-channel。
Vite Worker - 处理请求
Vite Worker是一个 Web Worker，它会处理 Service Worker 捕获的请求。
创建 Vite 服务器的示例：

import {
  transformWithEsbuild,
  ModuleGraph,
  transformRequest,
  createPluginContainer,
  createDevHtmlTransformFn,
  resolveConfig,
  generateCodeFrame,
  ssrTransform,
  ssrLoadModule,
  ViteDevServer,
  PluginOption
} from 'vite';
export async function createServer = async () => {
  const config = await resolveConfig(
  {
    plugins: [
    // virtual plugin to provide vite client/env special entries (see below)
    viteClientPlugin,
    // virtual plugin to resolve NPM dependencies, e.g. using unpkg, skypack or another provider (browser-vite only handles project files)
    nodeResolvePlugin,
    // add vite plugins you need here (e.g. vue, react, astro ...)
    ]
    base: BASE_URL, // as hooked in service worker
    // not really used, but needs to be defined to enable dep optimizations
    cacheDir: 'browser',
    root: VFS_ROOT,
    // any other configuration (e.g. resolve alias)
  },
  'serve'
  );
  const plugins = config.plugins;
  const pluginContainer = await createPluginContainer(config);
  const moduleGraph = new ModuleGraph((url) => pluginContainer.resolveId(url));
  const watcher: any = {
  on(what: string, cb: any) {
    return watcher;
  },
  add() {},
  };
  const server: ViteDevServer = {
  config,
  pluginContainer,
  moduleGraph,
  transformWithEsbuild,
  transformRequest(url, options) {
    return transformRequest(url, server, options);
  },
  ssrTransform,
  printUrls() {},
  _globImporters: {},
  ws: {
    send(data) {
    // send HMR data to vite client in iframe however you want (post/broadcast-channel ...)
    },
    async close() {},
    on() {},
    off() {},
  },
  watcher,
  async ssrLoadModule(url) {
    return ssrLoadModule(url, server, loadModule);
  },
  ssrFixStacktrace() {},
  async close() {},
  async restart() {},
  _optimizeDepsMetadata: null,
  _isRunningOptimizer: false,
  _ssrExternals: [],
  _restartPromise: null,
  _forceOptimizeOnRestart: false,
  _pendingRequests: new Map(),
  };
  server.transformIndexHtml = createDevHtmlTransformFn(server);
  // apply server configuration hooks from plugins
  const postHooks: ((() => void) | void)[] = [];
  for (const plugin of plugins) {
  if (plugin.configureServer) {
    postHooks.push(await plugin.configureServer(server));
  }
  }
  // run post config hooks
  // This is applied before the html middleware so that user middleware can
  // serve custom content instead of index.html.
  postHooks.forEach((fn) => fn && fn());
  await pluginContainer.buildStart({});
  await runOptimize(server);
  
  return server;
}

通过 browser-vite 处理请求的伪代码：

import {
  transformRequest,
  isCSSRequest,
  isDirectCSSRequest,
  injectQuery,
  removeImportQuery,
  unwrapId,
  handleFileAddUnlink,
  handleHMRUpdate,
} from 'vite/dist/browser';
...
async (req) => {
  let { url, accept } = req
  const html = accept?.includes('text/html');
  // strip ?import
  url = removeImportQuery(url);
  // Strip valid id prefix. This is prepended to resolved Ids that are
  // not valid browser import specifiers by the importAnalysis plugin.
  url = unwrapId(url);
  // for CSS, we need to differentiate between normal CSS requests and
  // imports
  if (isCSSRequest(url) && accept?.includes('text/css')) {
  url = injectQuery(url, 'direct');
  }
  let path: string | undefined = url;
  try {
  let code;
  path = url.slice(1);
  if (html) {
    code = await server.transformIndexHtml(`/${path}`, fs.readFileSync(path,'utf8'));
  } else {
    const ret = await transformRequest(url, server, { html });
    code = ret?.code;
  }
  // Return code reponse
  } catch (err: any) {
  // Return error response
  }
}

查看 Vite 内部中间件源码 获取更多细节。
和 Stackblitz WebContainers 相比如何

"WebContainers"：在浏览器中运行 Node.js

Stackblitz 的 WebContainers 也可以在浏览器中运行Vite。你可以去优雅的去 vite.new 拥有一个工作环境。
作者表示自己不是 WebContainers 方面的专家，但简而言之，browser-vite 在 Vite 级别上模拟了 FS 和 HTTPS 服务器，WebContainers 在 Node.js 级别上模拟了 FS 和其他很多东西，而 Vite 只需做一些额外的修改就可在上面运行。
它可以将 node_modules 存储在浏览器的 WebContainer 中。但它不会直接运行 npm 或 yarn，可能是因为会占用太多空间。他们将这些命令链接到 Turbo ———— 他们的包管理器。
WebContainers 也可以运行其他框架，如 Remix、SvelteKit 或 Astro。

 

 这很神奇✨这是令人兴奋的