【微前端】手把手从零开始带你实现一个React子应用的接入

前言

小伙伴们大家好。今天继续给大家分享关于微前端qiankun的相关知识。前面的文章我们基于qiankun+vue2.0已经实现了一个简单的微前端应用了，并且还实现了history和hash两种路由模式的切换。在该应用中无论是主应用还是子应用我们用的都是vue的技术栈，这并没有体现出微前端的最大特点（与技术栈无关）。因此本文将在原有微前端应用的基础上再接入一个react的子应用。

另外：本文目的仅仅是为了体现一下微前端与技术栈无关的特点，所以这里只描述一下接入react项目的简单步骤和关键代码，关于更多react相关的知识这里不再过多赘述。

创建react项目

为了让主应用能够接入一个react子应用，我们需要先创建一个react项目。

• 安装create-react-app脚手架 （npm install create-react-app -g）
• 利用create-react-app 创建一个react项目react-child
• 项目创建完成后，首先运行一下num run eject命令，将项目中的一些配置文件暴露出来
• 文件暴露后会多出个config目录，找到 config 目录下的 webpack.config.js 文件并定位找到 output 属性，并为其添加新的配置属性：library和libraryTarget，同时将 globalOjbect 的值改为：“window”
• 找到 config 目录下的 webpackDevServer.config.js并在module.exports的return中添加headers：“Access-Control-Allow-Origin”：“*” 设置允许跨域
• 打开src下的index.js文件，将原有渲染元素的代码封装到一个render函数中，便于分情况调用。
  • 1.指定容器时需要指定元素的选择范围，避免与其他应用冲突
  • 2.添加window.__ POWERED_BY_QIANKUN __ 来判断是主应用启动还是子应用独立运行
  • 3.导出3个必需的方法bootstrap、mount和unmount

到这里子应用的相关配置就基本完成，已经满足接入主应用的条件。下面我们来看下关键代码实现：（这里只展示修改部分的关键代码，未提及到的表示均为改动，使用项目的默认代码即可）

• 安装脚手架

npm install create-react-app -g

• 创建项目 react-child

create-react-app react-child

• 切换到项目目录运行命令暴露相关配置文件

npm run eject

• 修改webpack.config.js，添加library和libraryTarget

// config/webpack.config.js
// ......省略
output:{
   
	//...省略
	globalObject: "window",
	library:'react-child',//命名自己决定（可随意命名）
	libraryTarget:'umd'
	//...省略
}
// ......省略

• 修改webpackDevServer.config.js设置允许跨域

// config/webpackDevServer.config.js