远程获取的HTML的项目如何迁移到Rsbuild #6846

KingrrrYuri · 2025-12-26T18:32:33Z

KingrrrYuri
Dec 26, 2025

大家好，我正在将一个基于 Vite 的项目迁移到 Rsbuild，但在处理自定义 HTML 和 JS 动态注入逻辑时遇到了两个关键问题，希望能得到一些指导。
我们的项目会代理服务器上的平台资源，并通过本地 API 将编译后的代码注入到指定 DOM 中。在 Vite 中，我们使用了一个自定义中间件插件来实现以下功能：

拦截特定 HTML 请求（如 /x_desktop/app.html 或包含 componentName 的 /x_desktop/index.html），从远程服务器获取原始 HTML，并在中注入一段用于支持 React Fast Refresh 的脚本；
动态返回 JS 入口脚本（匹配 /${componentPath}/Main* 的请求），该脚本会调用 runComponent() 并引入本地的 ../src/main.jsx，由 Vite 自动处理依赖和 HMR。
这两部分在 Vite 下工作良好，热重载也能正常生效。

迁移到 Rsbuild 过程中遇到的问题：

动态 JS 入口无法加载完整 chunk
我尝试将 Vite 中的 ../src/main.jsx 替换为 Rsbuild 构建输出的 ../static/js/index.js，但发现只加载了主入口文件，其他按需 split 的 chunk 并未被自动引入（浏览器控制台报模块缺失错误）。
热重载未生效
我尝试进行all-in-one，能成功加载到我的项目，但是热重载是失效的（经测试，对于文件的修改，需重启dev后才能生效），即使启用了 dev.hmr: true，React 组件修改后页面不会自动刷新或更新。不确定是否需要手动注入类似 Vite 的 $RefreshReg$ 等全局钩子，或者 Rsbuild 是否已内置支持但我的配置有遗漏。

请问Rsbuild 是否支持类似 Vite 的“运行时动态注入 HTML + 启用 HMR”的能力？如果有，应该如何正确配置？
对于动态返回的 JavaScript 入口（用于 runComponent），如何确保所有相关 chunk 被正确加载？是否需要使用 Rsbuild 提供的 manifest 或 runtime API？
是否有推荐的方式在 Rsbuild dev server 中添加自定义中间件，以实现对 HTML/JS 响应的拦截与改写？
非常感谢！部分代码片段如下，如果需要，我可以提供简化后的复现仓库或相关配置片段。

// 获取远程html部分
if (
  req.url.startsWith('/x_desktop/app.html') ||
  (req.url.startsWith('/x_desktop/index.html') &&
    req.url.includes(componentName))
) {
  const reactViteFixupScript = `
              <script type="module">
                import RefreshRuntime from '../@react-refresh'
                RefreshRuntime.injectIntoGlobalHook(window)
                window.$RefreshReg$ = () => {}
                window.$RefreshSig$ = () => (type) => type
                window.__vite_plugin_react_preamble_installed__ = true
              </script>
            `
  const htmlUrl = new URL(req.url, host)
  axios
    .get(htmlUrl.toString())
    .then(html => {
      const htmlContent = html.data

      const headIndex = htmlContent.indexOf('<head>')
      const newHtmlContent =
        htmlContent.slice(0, headIndex + 6) +
        reactViteFixupScript +
        htmlContent.slice(headIndex + 6)

      res.setHeader('Content-Type', 'text/html')
      res.end(newHtmlContent, 'utf8')
    })
    .catch(() => {
      res.statusCode = 500
      res.end(`get remote html file error: ${error.message}`)
    })
}

// 动态引入部分
if (req.url.match(`/${componentPath}/Main*`)) {
  const script = `
            ${getRunComponentFunStr()}
            runComponent("${componentName}", {
              js: ['../src/main.jsx']
            });
            `
  res.setHeader('Content-Type', 'application/javascript; charset=UTF-8')
  res.end(script, 'utf8')
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

远程获取的HTML的项目如何迁移到Rsbuild #6846

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

远程获取的HTML的项目如何迁移到Rsbuild #6846

Uh oh!

KingrrrYuri Dec 26, 2025

Replies: 0 comments

KingrrrYuri
Dec 26, 2025