微前端 - qiankun 入门到实践——第四节：Qiankun的安装与配置

青焰聚鑫
714 阅读3分钟

在本节中，我们将介绍如何在React 18项目中安装和配置Qiankun，以实现微前端架构。Qiankun是一个基于Single-SPA的微前端框架，提供了便捷的子应用注册、加载和生命周期管理功能。

安装Qiankun

首先，在主应用中安装Qiankun库：

npm install qiankun

主应用的配置

主应用（Container App）负责管理和加载各个子应用。我们将通过以下步骤配置主应用：

  1. 设置项目结构

创建一个基本的React 18项目，并配置好路由和状态管理。

npm create vite@latest main-app --template react-ts
cd main-app
npm install

文件结构：

main-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   ├── App.tsx
│   ├── main.tsx
│   ├── store.ts
├── index.html
├── package.json
└── vite.config.ts
  1. 配置Router和Qiankun

我们将使用react-router-dom来设置主应用的路由，并使用Qiankun来管理子应用。

安装react-router-dom：

npm install react-router-dom

配置Router：

在src/main.tsx中设置基本的React Router配置：

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import App from './App';
import './index.css';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container!);

root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

配置Qiankun：

在src/App.tsx中，注册子应用并启动Qiankun：

// src/App.tsx
import React, { useEffect } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  useEffect(() => {
    registerMicroApps([
      {
        name: 'sub-app-1',
        entry: '//localhost:7100', // 子应用入口
        container: '#subapp-container',
        activeRule: '/subapp1',
      },
      {
        name: 'sub-app-2',
        entry: '//localhost:7200',
        container: '#subapp-container',
        activeRule: '/subapp2',
      },
    ]);
    start();
  }, []);

  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/subapp1">Sub App 1</Link></li>
          <li><Link to="/subapp2">Sub App 2</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/subapp1/*" element={<div id="subapp-container"></div>} />
        <Route path="/subapp2/*" element={<div id="subapp-container"></div>} />
      </Routes>
    </div>
  );
};

export default App;
  1. 创建主应用页面

创建一些简单的页面组件：

// src/pages/Home.tsx
const Home = () => (
  <div>
    <h1>Home Page</h1>
  </div>
);

export default Home;

// src/pages/About.tsx
const About = () => (
  <div>
    <h1>About Page</h1>
  </div>
);

export default About;
  1. 配置状态管理

如果需要全局状态管理，可以在src/store.ts中配置Redux Toolkit或其他状态管理工具。

// src/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

然后在src/main.tsx中引入全局状态管理：

// src/main.tsx
import { Provider } from 'react-redux';
import store from './store';

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);

子应用的配置

每个子应用也是一个Vite+React 18项目，需要做一些特殊配置以支持作为微前端应用被主应用加载。

  1. 创建子应用

创建并初始化一个新的Vite项目作为子应用：

npm create vite@latest sub-app-1 --template react-ts
cd sub-app-1
npm install

文件结构：

sub-app-1/
├── public/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── index.css
├── index.html
├── package.json
└── vite.config.ts
  1. 配置子应用的生命周期函数

修改子应用的main.tsx以支持作为微前端应用启动：

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

function render(props: any) {
  const { container } = props;
  const root = ReactDOM.createRoot(container ? container.querySelector('#root') : document.querySelector('#root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('React app bootstraped');
}

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

export async function unmount(props: any) {
  const { container } = props;
  const root = container ? container.querySelector('#root') : document.querySelector('#root');
  ReactDOM.unmountComponentAtNode(root);
}
  1. 配置Vite支持跨域加载

在vite.config.ts中配置CORS支持，以便主应用可以加载子应用的资源：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 7100,
    cors: true,
  },
});
  1. 添加基本组件

创建一个简单的子应用页面：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 7100,
    cors: true,
  },
});

启动和测试

  1. 启动主应用

在main-app目录下启动主应用：

npm run dev
  1. 启动子应用

在sub-app-1目录下启动子应用：

npm run dev
  1. 测试集成

访问主应用的URL，导航到/subapp1路径，应该会看到子应用1的内容被正确加载。

通过本节内容，我们已经学习了如何在React 18项目中安装和配置Qiankun，设置主应用和子应用，并实现基本的微前端集成。接下来，我们将在这个基础上进一步探索子应用之间的通信、样式管理、性能优化和安全性等高级主题。

avatar
文章
阅读
粉丝