QianKun框架初使用！

此文只是自己写的小demo，可实现微服务，才敢拿出来和大家分享，后面会把github链接或者码云的链接贴出来。
配上qiankun的官方链接一份
https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8

一、相关准备
主应用：React、QianKun、react-router-dom、react-router
微应用：React、react-router-dom、react-router、@rescripts/cli
建造目录：parentReact为主应用，childReact为微应用

这里就拿两个应用来展示

二、开始操作
简单的npm install就不在这里说了哈，各位亲们。

1、parentReact操作，src/index.js中引入乾坤，
import { registerMicroApps, start } from ‘qiankun’;
registerMicroApps([
{
name: ‘parentReact’,
entry: ‘//localhost:3000’, // 主应用运行的端口号
container: ‘#container’,
activeRule: ‘/parent-react’,
},
{
name: ‘childReact’,
entry: ‘//localhost:3001’, // 微应用运行的端口号
container: ‘#container’,
activeRule: ‘/child-react’,
}
]); // 这里注册主应用和微应用
这里的start建议放在index.js文件的最后执行，以免出现container没有加载的情况
start(); // 启动 qiankun

2、操作parentReact的路由模式，手动设置为BrowserRouter，并且配置一个两个自定义路由(随便什么都可以,Route的component里面返回一个h1标签即可)

3、切换到微应用中childParent中，首先在src文件夹下新建文件public-path.js，并在index.js中的最顶部引入这个文件(这一步是要修改webpack配置中的publicPath)
if (window.POWERED_BY_QIANKUN) {
window.webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}(这里我给代码块中加了一个全局的window，避免了eslint检测的not defined)

4、在src/index.js文件中导出qiankun在主应用中要使用的生命周期(简洁意赅就是导出生命周期)

5、安装插件 @rescripts/cli npm i -D @rescripts/cli
根目录新增 .rescriptsrc.js
const { name } = require(’./package’);

module.exports = {
webpack: (config) => {
config.output.library = ${name}-[name]; //这里的属性值建议使用主应用中注册微应用时定义的name，避免发生错误
config.output.libraryTarget = ‘umd’;
config.output.jsonpFunction = webpackJsonp_${name};
config.output.globalObject = ‘window’;

return config;

},

devServer: (_) => {
const config = _;

config.headers = {
  'Access-Control-Allow-Origin': '*',
};
config.historyApiFallback = true;
config.hot = false;
config.watchContentBase = false;
config.liveReload = false;

return config;

},
};

6、修改微应用中的package.json文件
7、修改微应用的路由模式，并添加路由。
<BrowserRouter basename={"/child-react"}> // basename切记设置，和注册微应用时保持一致。

到这里基本设置就结束了。如果启动项目后报错，请参考 https://qiankun.umijs.org/zh/faq qiankun常见问题一栏。

谢谢大家的阅读。祝大家写代码没有BUG，不被需求所难倒。
后期我会把代码地址贴到评论区，有问题大家及时指出哦。