qiankun 微前端

微前端 react 基座（18版本）， 子应用也全是react （17版本）

分为主应用和子应用：
主应用

• 引入qiankun
• 在入口文件index.js 配置路由

import { registerMicroApps, start } from 'qiankun'

const apps = [
 {
   name:'react_child1',   //子应用名字
   entry:"//localhost:3001",  //子应用口地址，子应用需要设置跨域
   container: "#container",  //子应用的容器
   activeRule:"/todo"。    //子应用的路由
 },
 {
   name:"react_child2",    
   entry:"//localhost:3002",
   container:"#root",
   activeRule:"/good"
 }
]
registerMicroApps(apps)
start()

• app.js 配置路由

import { BrowserRouter as Router, Link } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <h1>base</h1>
      <Router>
        <Link to="/todo">react1</Link>
        <Link to="/good">react2</Link>
      </Router>
      <div id="container"></div>   //存放子应用的容器
    </div>
  );
}
export default App;

子应用

• 安装 react-app-rewired 覆盖添加自己的webpack 配置
• 根目录下创建config-overrides.js

module.exports = {
    webpack: (config) => {
        config.output.library = 'reactApp'
        config.output.libraryTarget = 'umd'   // umd格式打包
        config.output.publicPath = 'http://localhost:3001/' //访问当前子应用的path_base
        return config
    },
    devServer: (configFunction) => {
        return function(proxy,allowHost) {
            const config = configFunction(proxy,allowHost)
            config.headers = {
                'Access-Control-allow-Origin':"*"  //必须设置跨域,主应用通过fetch向子应用服务器发起请求，
            }
            return config
        }
    }
}

• 子应用入口文件 封装render 函数 同时向主应用暴露生命周期方法

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

//对render函数进行fengzhuang
function render(props){
  console.log("props",props)
  const { container } = props;
  ReactDOM.render(<App></App>,container?container.querySelector("#root") :document.querySelector("#root"))
}
//非qiankun调用
if(!window.__POWERED_BY_QIANKUN__){
  ReactDOM.render(<App></App>,document.querySelector("#root"))
}
//qiankun环境下需要改变publicPath
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

//暴露bootStraped
export async function bootstrap(props){
  console.log("[child1] app bootstrapd")
}

//暴露挂载的方法
export async function mount(props){
  render(props)
}

//暴露卸载的方法
export async function unmount(){
	ReactDOM.unmountComponentAtNode(document.querySelector('#root'))
}