微应用 qiankun 项目搭建

保姆级搭建qiankun教程 ==> hello world级别搭建，不包含应用间通信之类的

本文经过本人按照qiankun文档==>项目实践书写，主要记录一下在搭建过程中遇到的问题

• 因为react-scripts 高于版本4所造成的npm i -D @rescripts/cli安装失败

解决办法

将react-scripts版本降到2～4之间

• 微应用中使用了eslint导致微应用报错问题

解决办法

在package.json文件中进行以下配置

"eslintConfig": {
     	...
    ,"globals": {
    
      "__webpack_public_path__": true
    }   
 },

第一步 ==> 搭建主应用

我是采用的React应用
1.新建React项目

npx create-react-app main_app

2.主应用添加qiankun依赖

$ yarn add qiankun # or npm i qiankun -S

3.主应用中注册微应用

import {
    registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
   
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
   
    name: 'vue app',
    entry: {
    scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start();

如果不知道该怎么下手可以像我这样写在App.js里面