0

在我的特定用例中，我需要动态加载导入和路由，为此我需要实现模板引擎的 json 方法。根据文档实施时，我收到一个空白屏幕。此根配置是从 github 存储库中提取的。

react-mf-root-config.js

const routes = constructRoutes({
routes: [
  {
    type: "route",
    path: "planets",
    routes: [{ type: "application", name: "@react-mf/planets" }],
  },
 ],
});
const applications = constructApplications({
  routes,
  loadApp: ({ name }) => System.import(name),
});

applications.forEach(registerApplication);

start();

索引.ejs

  <script
  type="systemjs-importmap"
  src="https://storage.googleapis.com/react.microfrontends.app/importmap.json"
></script>
<% if (isLocal) { %>
<script type="systemjs-importmap">
  {
    "imports": {
      "@react-mf/root-config": "//localhost:9000/react-mf-root-config.js"
    }
  }
</script>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"> 
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.min.js"></script>
<template id="single-spa-layout">
  <single-spa-router> </single-spa-router>
</template>
</head>
<body>
<script>
    System.import("@react-mf/root-config");
     System.import("@react-mf/styleguide");
</script>
...
4

0 回答 0