跳到主要内容

vite-react-System

一、认识​

二、实现​

2.1 index.html​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Micro-App-React</title>
  </head>
  <body>
    <div id="micro-app-react"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

2.2 src/main.tsx​

import packageInfo from "../package.json";
import * as app from "./single-spa-config";
import { registerApplication, start } from "single-spa";

registerApplication({
  name: packageInfo.name,
  app: app,
  activeWhen: () => true,
  customProps: {
    base: "/",
    mode: "history",
  },
});
start({
  urlRerouteOnly: true,
});

2.3 src/single-spa-config.tsx​

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import singleSpaReact from "single-spa-react";

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return <div>This renders when a catastrophic error occurs</div>;
  },
});

export const { bootstrap, mount, unmount, update } = reactLifecycles;

2.4 src/App.tsx​

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  NavLink,
  HashRouter,
} from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App(props: any) {
  console.log("Micro-App-React props", props);
  const { base, mode } = props;
  const Router = mode === "history" ? BrowserRouter : HashRouter;
  return (
    <Router basename={base}>
      <NavLink to="/">首页</NavLink>
      <NavLink to="/about">关于</NavLink>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

2.5 package.json​

{
  "name": "micro-app-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "single-spa": "^5.9.4",
    "single-spa-react": "^4.6.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "terser": "^5.14.2",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

2.6 vite.config.ts​

import { defineConfig } from "vite";
import packageInfo from "./package.json";
import reactRefresh from "@vitejs/plugin-react-refresh";

export default ({ mode }) => {
  return defineConfig({
    plugins: [reactRefresh()],
    base:
      mode === "production"
        ? `https://bolawen.github.io/MicroFrontEnd/Single-Spa-BySystem/${packageInfo.name}/`
        : "/",
    server: {
      port: 8082,
    },
    build: {
      assetsDir: "",
      outDir: "output",
      cssCodeSplit: false,
      rollupOptions: {
        input: "src/single-spa-config.tsx",
        preserveEntrySignatures: "exports-only",
        external: [
          "axios",
          "lodash",
          "react",
          "react-dom",
          "single-spa",
          "single-spa-react",
        ],
        output: {
          format: "system",
          entryFileNames: `${packageInfo.name}.[hash].js`,
        },
      },
    },
  });
};