前言

主要记录一下如何在qiankun中如何接入一个 react子应用。

创建react 主应用并接入qiankun

主要的步骤是:

先创建一个主应用，通过create-react-app

在主应用中接入qiankun，创建registerApp.js ，在index.js中引入

配置registerApp.js中的qiankun的两个核心

创建主应用

npm install create-react-app -g // 全局安装脚手架 
npx create-react-app  subtrate // 创建主应用

安装router 切换子应用

npm install react-router-dom 
// 在index.js中添加切换
 <div className="App">
     <BrowserRouter>
     <Link to="/react1">react应用 1</Link>
     <Link to="/react2">react应用 2</Link>
     </BrowserRouter>

配置qiankun

对于location中不同的路径，展示不同的子应用

import {registerMicroApps, start} from 'qiankun';
 const loader = (loading) => {
    console.log("加载状态", loading)

 }

registerMicroApps([
    {
     name: "myreact",
    entry: "http://localhost:10000", //默认react启动的入口是10000
    activeRule: "/react1",//当路径是react的时候启动 
    container: "#container", //应用挂载的位置 
    loader
}

], {
    beforeLoad() {
         console.log("before load")
    },
     beforeMount() {
        console.log("before mount")
     },
      afterMount() {
        console.log("aftermount")
      },
       beforeUnmount() {
        console.log("before ummount")
       },
        afterUnmount() {
            console.log("after unmount")
        }
})
start()

下面我们就需要变换我们的子应用，让他可以被主应用来使用

1. 导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。子应用的index.js中

export async  function bootstrap () {

}
export async  function mount (props) {
  //基座的容器叫container 
  render(props)
   console.log(props)
  
}
export async  function unmount () {
  
}

2. 配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：我们使用的是rescripts/cli 添加一个.rescriptsrc.js文件

module.exports  = {
    webpack:  (config) => {
        config.output.libraryTarget =  "umd"
        config.output.library =  "myreact2" //打包的格式是umd
        config.output.publicPath ='//localhost:30001/'
        return config
    },
     devServer:(config) => {
        config.headers  = {
            "Access-Control-Allow-Origin":"*" // 允许跨域
        }
         return config
     }
}

把package.json中的react script改成rescripts

 "start": "rescripts start",
    "build": "rescripts build",
    "test": "rescripts test",
    "eject": "rescripts eject"

3. 更改子应用的port 使其跟在主应用配置的port相同

创建.env

PORT=10000
WDS_SOCKET_PORT= 10000

qiankun -从零实现一个react子应用的接入

前言

创建react 主应用 并接入qiankun