基于qiankun搭建react18微前端项目入门实践

基础环境

实践日期：2023-03-28

Vue CLI: 5.0.8
Node: 18.15.0
Package Manager: npm 9.5.0
OS: Windows 10 x64

设置npm镜像源

npm config set registry https://registry.npmmirror.com/

主应用

创建项目，命名为main，实践版本：create-react-app@5.0.1、react@18.2.0

npx create-react-app main --template typescript

安装路由，实践版本：react-router-dom@6.9.0

cd main
npm i react-router-dom -S

安装qiankun，实践版本：qiankun@2.10.3

npm i qiankun -S

创建环境配置：.env

BROWSER=none

创建空组件：src/Empty.tsx

function Empty() {
    return null;
}

export default Empty;

创建Contact组件：src/Contact.tsx

function Contact() {
    return (
        <div>Contact component</div>
    );
}

export default Contact;

添加路由链接和微应用容器：src/App.tsx

import { NavLink, Outlet } from 'react-router-dom';

        <img src={logo} className="App-logo" alt="logo" style={{ height: "8vmin" }} /> {/* 设置高度 */}
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p> {/* 以下是新增内容 */}
        <p>
          <NavLink className="App-link" to={"/"}>Root</NavLink>|
          <NavLink className="App-link" to={"contact"}>Contact</NavLink>|
          <NavLink className="App-link" to={"micro1"}>Micro1 Root</NavLink>|
          <NavLink className="App-link" to={"micro1/contact"}>Micro1 Contact</NavLink>
        </p>
        <div style={{ height: "calc(20px + 2vmin)" }}>
          <Outlet />
        </div>
        <div id="container" style={{ border: "solid", height: "40vh", overflow: "auto", width: "calc(100% - 20px)" }}></div>

设置样式：src/App.css

.App-link {
  color: #61dafb;
} /* 以下是新增内容 */

.App-link.active {
  color: white;
}

设置路由、注册微应用并启动：src/index.tsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';

import Contact from './Contact';
import Empty from './Empty';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'contact',
        element: <Contact />,
      },
      {
        path: 'micro1/*',
        element: <Empty />,
      },
    ],
  },
]);
// 以上是新增内容
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 该行取代<App /> */}
  </React.StrictMode>
);
// 以下是新增内容
registerMicroApps([
  {
    name: 'micro1',
    entry: 'http://localhost:3001/micro1',
    container: '#container',
    activeRule: '/micro1',
  },
]);
start();

启动应用

npm start

微应用

创建项目，命名为micro1，实践版本：create-react-app@5.0.1、react@18.2.0

npx create-react-app micro1 --template typescript

安装路由，实践版本：react-router-dom@6.9.0

cd micro1
npm i react-router-dom -S

安装qiankun，实践版本：qiankun@2.10.3

npm i qiankun -S

安装craco，实践版本：@craco/craco@7.1.0、@craco/types@7.1.0

npm i @craco/craco @craco/types -D

创建环境配置：.env

BROWSER=none
PORT=3001

创建craco配置：craco.config.ts

import { CracoConfig } from "@craco/types";
const { name } = require('./package');

const config: CracoConfig = {
    webpack: {
        configure: {
            devServer: {
                headers: {
                    'Access-Control-Allow-Origin': '*',
                },
            },
            output: {
                chunkLoadingGlobal: `webpackChunk${name}`,
                library: `${name}-[name]`,
                libraryTarget: 'umd',
            },
        },
    },
};

module.exports = config;

设置craco脚本：package.json

  "scripts": { // react-scripts改为craco
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"

创建Contact组件：src/Contact.tsx

function Contact() {
    return (
        <div>Contact component</div>
    );
}

export default Contact;

修改根DOM节点标识：public/index.html

    <div id="root"></div> <!-- "root"改为"micro1-root" -->

添加路由链接：src/App.tsx

import { NavLink, Outlet } from 'react-router-dom';

      <header className="App-header" style={{ minHeight: 0 }}> {/* 设置最小高度 */}
        <img src={logo} className="App-logo" alt="logo" style={{ height: "8vmin" }} /> {/* 设置高度 */}
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p> {/* 以下是新增内容 */}
        <p>
          <NavLink className="App-link" to={"/"}>Root</NavLink>|
          <NavLink className="App-link" to={"contact"}>Contact</NavLink>
        </p>
        <div style={{ height: 'calc(20px + 2vmin)' }}>
          <Outlet />
        </div>

设置样式：src/App.css

.App-link {
  color: #61dafb;
} /* 以下是新增内容 */

.App-link.active {
  color: white;
}

设置路由、导出相应的生命周期钩子：src/index.tsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

import Contact from './Contact';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'contact',
        element: <Contact />,
      },
    ],
  },
], { basename: '/micro1' });

let root: ReactDOM.Root | null;

function render(props: { container: Element }) {
  root = ReactDOM.createRoot(props.container.querySelector('#micro1-root')!);
  root.render(
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  );    
}

export async function bootstrap() {
}

export async function mount(props: { container: Element }) {
  render(props);
}

export async function unmount() {
  if (root) {
    root.unmount();
    root = null;
  }
}

启动应用

npm start

访问

http://localhost:3000/

Root：http://localhost:3000/

Contact：http://localhost:3000/contact

Micro1 Root：http://localhost:3000/micro1

Micro1 Contact：http://localhost:3000/micro1/contact

相关

基于qiankun搭建angular15微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建angular15 hash URL微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建ng-alain15微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建ng-alain15微前端项目示例实践_TodayCoding的博客-CSDN博客

基于qiankun搭建vue3 webpack ts微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建vue3 webpack ts无懒加载微前端项目入门实践_TodayCoding的博客-CSDN博客

基于qiankun搭建element plus webpack微前端项目入门实践_TodayCoding的博客-CSDN博客