微应用-qiankun

前言

现在多数比较复杂的项目都会采用微应用的方式进行开发，一方面是对技术没有特别严格的要求，比如整个项目react,vue可以任意使用，另一方面也降低了各个模块的复杂度，但是微应用的学习成本也是不可忽略的因素。目前项目中已经采用了微应用开发，后面几篇文章会针对微应用做详细阐述，本篇使用qiankun来进行一个demo测试，后续会对这个几个微前端框架进行一个详细对比

1 相关概念

qiankun 官网 qiankun.umijs.org/zh/guide

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。各个子应用独立开发、独立部署，互不影响。

2 搭建项目

踩坑

目前公司使用的是无界进行微应用的开发，脚手架用的vite。然后我就没仔细看文档，就想着开始直接用 vite 创建vue3 来测试qiankun，理想很丰满，现实很打脸，没想到qiankun更新这么久的框架对vite的支持不是很友好，当时有报错去查问题，各种方法都去尝试，结果还是有问题，搞了一个几个小时就放那了，第二天又查资料才知道需要配置插件，不然不能使用，好家伙，掉坑里了。

创建应用

我们来创建一个react项目作为一个主应用，再创建一个同样的react做为子应用

1、安装 create-react-app

npm install -g create-react-app

2、检测 create-react-app 是否安装成功

create-react-app -V

3、创建 React 项目（可以在同一个文件夹下）

npx create-react-app micro-main-app （主应用）
npx create-react-app micro-react1 （子应用）

设置端口

同时我们可以在这个两个应用的根目录添加一个.env文件，设置我们本地开发的端口，这样可以避免端口占用，根据自己实际情况来设置。

主应用修改

进入 micro-main-app 目录安装 qiankun
$ yarn add qiankun # 或者 npm i qiankun -S

修改 index.js （已经删除了一些多余的文件）

js 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerMicroApps, start } from 'qiankun';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);


registerMicroApps([
  {
    name: 'micro-react1', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:8001', //子应用env设置的端口
    container: '#reactContainer', //子应用渲染节点
    activeRule: '/reactActiveRule', //路由监听，如果进入该路由，则渲染子应用
  }
]);

start();

修改app.js

js 复制代码

function App() {
  return (
    <div className="App">
      我是主应用
      {/* 子应用渲染节点,（必须）*/}
      <div id="reactContainer"></div>
    </div>
  );
}

export default App;

子应用修改

src 下新建 public-path.js，在 index.js 最顶部引入

js 复制代码

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

根目录创建 webpack.config.js

js 复制代码

const packageName = require('./package.json').name;
module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};

index.js 导出生命周期

js 复制代码

 import './public-path';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('rootReact'));
root.render(
  <App />
);

if (!window.__POWERED_BY_QIANKUN__) {
  root.render(
    <App />
  )
}
export async function bootstrap() {
  // 启动微应用
}
export async function mount() {
  // 加载微应用
}
export async function unmount() {
  // 卸载微应用
}
export async function update() {
  // 更新微应用
}

此时所有项目配置都已经完成，正常的是已经可以从主应用打开子应用的我们把两个应用服务跑起来，一个8000端口，一个8001端口