0

创建了一个反应应用程序，然后使用https://www.youtube.com/watch?v=W8oaySHuj3Y将其转换为单个水疗反应应用程序

当点击 http://localhost:8080/org-app.js 时，我会收到 javascript 文件的响应。此外，当http://single-spa-playground.org/playground/instant-test?name=@org/app&url=8080应用程序加载时。

但是，现在尝试在 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>
4

1 回答 1

1

这里的问题是你试图完全绕过single-spa。根配置应该是应用程序注册的地方，它创建路由和应用程序之间的关联，并指示何时安装/卸载它们。仅仅调用System.import("@example/app");是不够的，因为应用程序不管理自己的生命周期。相反，您可以执行以下操作：

System.import("single-spa").then(({ registerApplication, start }) => {
  registerApplication({
    name: "@example/app",
    app: () => System.import("@example/app"),
    activeWhen: ["/"],
  });
  
  start({
    urlRerouteOnly: true,
  });
});

我看不出这样做比 create-single-spa 提供的好处有什么好处。

最后，您似乎正在尝试这样做以控制应用程序的安装位置。single-spa 已经提供了两种方法来做到这一点：

于 2021-05-26T13:57:28.770 回答