基于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博客