[微前端实战]---040 子应用接入微前端-react15,react17

子应用接入微前端react15,react17

你将学到

1. 主应用要获取子应用的生命周期,方法(控制子应用的加载/卸载)

2. 微前端框架中获取子应用的结构,和依赖文件…

对子应用进行改造

一. react15

react15/webpack.config.js

output: {
    path: path.resolve(__dirname, 'dist'),
+   filename: 'react15.js',
+   library: 'react15',
+   libraryTarget: 'umd',
+   umdNamedDefine: true,
+    publicPath: 'http://localhost:8082/'
},
1
2
3
4
5
6
7
8

library: 'library' // 名字随便取，代表我们全局暴露的变量
1

publicPath: 'http://localhost:8082/'
1

当前子应用启动的访问地址8082增加配置后

$	cd react15
$	npm start
1
2

可以看到挂载到全局的变量react15

``http://localhost:8082/#/information`

修改react15/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import BasicMap from './src/router/index.jsx';
// import BasicMap from './src/router/index1.jsx';
import "./index.scss"

+ const render = () => {
+   ReactDOM.render((
+     <BasicMap />
+   ), document.getElementById('app-react'))
+ }
+ render()
+ 
+ if(!window.__MICRO_WEB__){ // 如果不是微前端环境,执行render
+   render()
+ }
+ 
+ // 如果在微前端环境,暴露生命周期
+ 
+ // 开始加载结构 (加载前的处理, 如参数处理..)
+ export const bootstrap = ()=>{
+   console.log("开始加载");
+ }
+ 
+ 
+ // 
+ export const mount = ()=>{
+   console.log("渲染成功");
+   render()
+ }
+ 
+ export const unmount = ()=>{
+   console.log("卸载");
+   // 卸载时候卸载react实例,卸载事件,清空当前根元素的内容
+ }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

增加bootstrap,mount,unmount生命周期，

如果在不在微前端框架： 即 cd react15 && npm start 启动， 直接render

如果在微前端框架中： 即根目录执行npm start , 会执行bootstrap,mount,unmount 生命周期进行挂载

再次在控制台查看window.react15, 发现已经挂载到了全局实例中

---

定义__MICRO_WEB__ 字段：， 微前端环境字段

方法：

bootstrap

mount

unmount

feat:react15微前端改造

二. react17

修改类似react15

react17/webpack.config.js

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'react17.js',
    library: 'react17',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: 'http://localhost:8083'
  },

1
2
3
4
5
6
7
8
9

修改react17/index.js

import React from 'react'
import "./index.scss"
import ReactDOM from 'react-dom'
import BasicMap from './src/router';

+ const render = () => {
+   ReactDOM.render(<BasicMap />, document.getElementById('app-react'))
+ }
+ 
+ 
+ render()
+ 
+ 
+ if (!window.__MICRO_WEB__) { // 如果不是微前端环境,执行render
+   render()
+ }
+ 
+ // 如果在微前端环境,暴露生命周期
+ 
+ // 开始加载结构 (加载前的处理, 如参数处理..)
+ export const bootstrap = () => {
+   console.log("开始加载");
+ }
+ 
+ 
+ // 
+ export const mount = () => {
+   console.log("渲染成功");
+   render()
+ }
+ 
+ export const unmount = () => {
+   console.log("卸载");
+   // 卸载时候卸载react实例,卸载事件,清空当前根元素的内容
+ }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

http://localhost:8083/#/index 输入window.react17

feat:react15微前端改造17

下一章开发主应用， 以及如何通过主应用控制子应用的加载