跳到主要内容

single-spa-transform

2024年03月21日
柏拉文
越努力，越幸运

一、认识​

二、实现​

2.1 根目录/app.js​

const Koa = require("koa");
const Path = require("path");
const Views = require("koa-views");
const Router = require("koa-router");
const axios = require("axios");

const app = new Koa();
const router = new Router({ prefix: "" });

app.use(
  Views(Path.resolve(__dirname, "views"), {
    extension: "hbs",
    map: { hbs: "handlebars" },
  })
);

router.get("/singleSpaTransformQiankun", async (ctx) => {
  const { name } = ctx.request.query;
  const content = {
    name,
    title: "页面渲染",
  };
  await ctx.render("single-spa-transform-qiankun", { ...content });
});

router.get("/qiankunMicroApp", async (ctx) => {
  const { name } = ctx.request.query;
  const htmlString = `
  <html>
    <head>
    </head>
    <body>
      <div id="micro-app-react"></div>
      <script src="https://bolawen.github.io/MicroFrontEnd/QianKun/micro-app-react/output/micro-app-react.umd.fb81bbbf.js"></script>
    </body>
  </html>
  `;
  ctx.body = htmlString;
});

app.use(router.routes());

app.listen(3002, () => {
  console.log("页面渲染服务启动成功！");
});

2.2 根目录/views/single-spa-transform-qiankun.hbs​

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>

    <script type="systemjs-importmap">
      { "imports": { 
        "react": "https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js",
        "react-router-dom": "https://cdn.jsdelivr.net/npm/react-router-dom@5.3.3/umd/react-router-dom.min.js",
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.8.2/lib/system/single-spa.min.js",
        "single-spa-react": "https://cdn.jsdelivr.net/npm/single-spa-react@4.6.1/lib/system/single-spa-react.js",
        "single-spa-vue": "https://cdn.jsdelivr.net/npm/single-spa-vue@2.5.1/dist/system/single-spa-vue.js",
        "singleSpa-JSEntry-micro-app-react": "https://bolawen.github.io/MicroFrontEnd/Single-Spa-BySystem/micro-app-react/output/micro-app-react.092b73cb.js"
      } }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.js"></script>

  </head>
  <body>
    <h3>{{name}}</h3>

    <script>
      function SingleTransformQianKun(){ 
        const app = System.import("{{name}}");
        window["{{name}}"] = { 
            domElement:document.createElement("div"),
            bootstrap: function(){ 
                return app.then(res=> res.bootstrap()) 
            }, 
            mount: function(props){ 
                window["{{name}}"].domElement.classList.add("micro-app-container");
                props.container.appendChild(window["{{name}}"].domElement); 
                app.then(res => res.mount({
                    ...props,
                    domElement: window["{{name}}"].domElement
                }));
            },
            unmount: function(props){
                return app.then(res => res.unmount({
                    ...props,
                    domElement: window["{{name}}"].domElement
                }));
            },
        } 
        if(!window.__POWERED_BY_QIANKUN__){
            app.then(res => res.mount({
                domElement: document.body
            }));
        }
    }

    SingleTransformQianKun();
    </script>
  </body>
</html>