跳到主要内容

vite-react-umd

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

一、认识​

二、实现​

2.1 src/main.tsx​

import React from "react";
import App from "./App";
import ReactDOM from "react-dom/client";
import packageInfo from "../package.json";

export interface QianKunPropsType {
  base: string;
  mode: "hash" | "history";
  mountContainer?: string;
}

function render(props: QianKunPropsType) {
  const { base, mode, mountContainer = "" } = props;
  console.log(document.getElementById(mountContainer))
  ReactDOM.createRoot(document.getElementById(mountContainer) as HTMLElement).render(
    <App base={base} mode={mode} />
  );
}

if (!window.__POWERED_BY_QIANKUN__) {
  const props: QianKunPropsType = {
    base: "/",
    mode: "history",
    mountContainer: `${packageInfo.name}`,
  };
  render(props);
}

export async function bootstrap() {
  console.log(`${packageInfo.name} bootstrap 阶段`);
}

export async function mount(props: QianKunPropsType) {
  console.log(`${packageInfo.name} mount 阶段`, props);
  render(props);
}

export async function unmount() {
  console.log(`${packageInfo.name} mount 阶段`);
}

2.2 src/App.tsx​

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

function App(props: QianKunPropsType) {
  const { base, mode } = props;
  const Router = mode === "history" ? BrowserRouter : HashRouter;
  return (
    <div className="App">
      <h3>Micro-App-React 微应用</h3>
      <Router basename={base}>
        <NavLink to="/">首页</NavLink>
        <NavLink to="/about">关于</NavLink>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2.3 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.4 vite.config.ts​

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

export default ({ mode }: { mode: string }) => {
  return defineConfig({
    base:
      mode === "production"
        ? `https://bolawen.github.io/MicroFrontEnd/QianKun/${packageInfo.name}/`
        : "/",
    plugins: [react()],
    server: {
      port: "8082",
    },
    build: {
      assetsDir: "",
      outDir: "output",
      cssCodeSplit: false,
      target: "es2015",
      rollupOptions: {
        input: "src/main.tsx",
        preserveEntrySignatures: "strict",
        output: {
          name: `${packageInfo.name}`,
          format: "umd",
          entryFileNames: `${packageInfo.name}.[format].[hash].js`,
        },
      },
    },
  });
};