build(模块联邦): 打包方案调整

remote 路径支持变量控制

buildServer.js

+const express = require("express");
+const setupProxy = require("./src/setupProxy");
+const serveStatic = require("serve-static");
+var history = require("connect-history-api-fallback");
+
+const PORT = 5001;
+const app = express();
+setupProxy(app);
+
+app.use(history());
+// app.use(express.static("build"));
+app.use(serveStatic("build", { index: ["index.html", "index.htm"] }));
+
+app.listen(PORT);
+console.log(`build 文件预览服务已开启 http://127.0.0.1:${PORT}`);

config-mf.js

@@ -20,21 +20,33 @@ function filterShared(keys) {
   return newDeps;
 }
 
+const isDev = process.env.NODE_ENV !== "production";
+
+const remoteOrigin = isDev ? "http://localhost:9000" : process.env.REMOTE_URL;
+
+if (!remoteOrigin) {
+  throw new Error(
+    "打包失败：土星云远程模块地址不存在, 请在环境变量中设置 REMOTE_URL 为远程模块地址"
+  );
+}
 // 模块联邦
 module.exports = function (config, env) {
+  // config.output.crossOriginLoading = "use-credentials";
+  config.output.crossOriginLoading = "anonymous";
+  console.log(`土星云业务远程地址为：${remoteOrigin}`);
   config.plugins.unshift(
     new ModuleFederationPlugin({
       name: "minio_console",
       remotes: {
-        saturnApp: "saturnApp@http://localhost:9000/remoteEntry.js",
-      },
-      filename: "remoteEntry.js",
-      exposes: {
-        "./PageLayout": "./src/screens/Console/Common/Layout/PageLayout.tsx",
-        "./PageHeader":
-          "./src/screens/Console/Common/PageHeader/PageHeader.tsx",
-        "./history": "./src/history.ts",
+        saturnApp: `saturnApp@${remoteOrigin}/remoteEntry.js`,
       },
+      // filename: "remoteEntry.js",
+      // exposes: {
+      //   "./PageLayout": "./src/screens/Console/Common/Layout/PageLayout.tsx",
+      //   "./PageHeader":
+      //     "./src/screens/Console/Common/PageHeader/PageHeader.tsx",
+      //   "./history": "./src/history.ts",
+      // },
       shared: {
         ...filterShared([
           // '@codemirror/lang-json',
@@ -69,6 +81,7 @@ module.exports = function (config, env) {
           // 'redux',
           // 'redux-thunk',
           "superagent",
+          "react-router-dom",
           // 'use-debounce',
           // 'websocket',
           // 'chart.js',

src/saturnCloud/index.tsx

 import { Suspense, lazy, useState, useEffect } from "react";
+import { NavLink } from "react-router-dom";
 import LoadingComponent from "../common/LoadingComponent";
 import history from "../history";
 // import RemoteComponent from "./RemoteComponent";
@@ -46,8 +47,10 @@ export function useSaturnConsoleMenu() {
   useEffect(() => {
     import("saturnApp/consoleMenu")
       .then((res) => {
-        console.log(res.default);
-        setMenu(res.default);
+        const createMenu = res.default;
+        createMenu(NavLink).then((menu) => {
+          setMenu(menu);
+        });
       })
       .catch((e) => {
         console.error(e);