Javascript 如何将单个spa应用程序导入简单的html页面？_Javascript_Reactjs_Single Spa

Javascript 如何将单个spa应用程序导入简单的html页面？

javascript reactjs

Javascript 如何将单个spa应用程序导入简单的html页面？,javascript,reactjs,single-spa,Javascript,Reactjs,Single Spa,创建了react应用程序，然后使用将其转换为单个spa react应用程序当击中目标时http://localhost:8080/org-我得到了javascript文件的响应。当应用程序加载时也是如此但是，现在尝试在html页面中导入相同的应用程序并不会替换标记。但是，由于正在进行api调用，并且正在加载redux存储，因此它会加载组件没有完成singleSpa.registerApplication即使我这样做了，也需要创建根组件来注册应用程序 org-app.js import

创建了react应用程序，然后使用将其转换为单个spa react应用程序

当击中目标时http://localhost:8080/org-我得到了javascript文件的响应。当应用程序加载时也是如此

但是，现在尝试在html页面中导入相同的应用程序并不会替换标记。但是，由于正在进行api调用，并且正在加载redux存储，因此它会加载组件

没有完成singleSpa.registerApplication即使我这样做了，也需要创建根组件来注册应用程序

org-app.js

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";
import il8n from "./i18n";

const domElementGetter = () => {
  let el = document.getElementById("example-app");
  if (!el) {
    el = document.createElement("div");
    el.id = "example-app";
    document.body.appendChild(el);
  }
  return el;
};

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  il8n,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
  domElementGetter,
});

export const { bootstrap, mount, unmount } = lifecycles;

直接打开TestPage.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.5/runtime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.3.0/dist/import-map-overrides.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.js"></script>
    <meta name="importmap-type" content="systemjs-importmap" />
    <script type="systemjs-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
          "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
          "rxjs": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs.min.js",
          "rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs/system/es2015/rxjs-operators.min.js"
        }
      }
    </script>

    <script type="systemjs-importmap">
      {
        "imports": {
          "@example/app": "http://localhost:8080/org-app.js"
        }
      }
    </script>
  </head>

  <body>
    <script>
      System.import("@example/app");
    </script>
    <div id="example-app"></div>

   

    <h1></h1>
    <p>My first paragraph.</p>
    <import-map-overrides-full
      show-when-local-storage="devtools"
      dev-libs
    ></import-map-overrides-full>
  </body>
</html>


{
“进口”：{
“单人水疗”：https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single spa.min.js“，
“反应”：https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js“，
“反应dom”：https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react dom.production.min.js“，
“rxjs”：https://cdn.jsdelivr.net/npm/@esm bundle/rxjs/system/es2015/rxjs.min.js“，
“rxjs/运营商”：https://cdn.jsdelivr.net/npm/@esm bundle/rxjs/system/es2015/rxjs operators.min.js”
}
}
{
“进口”：{
“@example/app”：”http://localhost:8080/org-app.js“
}
}
系统导入（“@example/app”）；
我的第一段

这里的问题是，您试图完全绕过单个spa。根配置应该是应用程序注册的地方，它创建路由和应用程序之间的关联，并指示何时安装/卸载它们。只需调用

System.import（“@example/app”）是不够的，因为应用程序不管理自己的生命周期。相反，您可以这样做：
System.import（“单个spa”）。然后（{registerApplication，start}）=>{
注册表应用程序({
名称：“@example/app”，
app:（）=>System.import（“@example/app”），
activeWhen:[“/”]，
});
开始({
urlRerouteOnly:true，
});
});

我看不出这样做比创建单一水疗中心有什么好处
最后，您似乎正在尝试这样做，以控制应用程序安装到的位置。有两种方法可以利用single spa已经提供的功能实现这一点：

使用户可以简单地创建所有中间DOM节点
使用相应的框架帮助程序来指定应用程序应该装载到的位置