如何使用qiankun开发React微应用

1、在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

 

 

2、入口文件 index.js 修改，为了避免根 id #root 与其他的 DOM 冲突，需要限制查找范围。

      （1）需要导出生命周期 bootstrap mount unmount

      （2）React 18 用 createRoot 替换 render

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}


export async function bootstrap(){
  console.log('bootstrap')
}

export async function update(props) {
  console.log('update subA...')
}

export async function mount(props){
  render(props);
}

export async function unmount(props){
  ReactDOM.unmountComponentAtNode(
    props?.container ? props.container.querySelector('#root') : document.getElementById('#root')
  )
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

　

3、设置 history 模式路由的 base：

<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>

如果使用的react-router-dom是V6版本

(1)Routes这个新的元素是以前 Switch 组件的升级版，它包括相对路由和链接、自动路由排名、嵌套路由和布局等功能。

import { BrowserRouter as Router, Routes } from 'react-router-dom';

(2)element属性是Route必要属性，当遇到当前的URL时，会告诉 Route 组件要渲染哪个React组件。这里的 element 键字也是新增加的，此前，在React Router v5中，你会使用名为 component 的属性。

    <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ?     '/app/subB' : '/'}>
      <Link to='/'>Home</Link> | <Link to='/about'>About</Link>
      <Routes>
        <Route path='/' exact element={<h3>React Home Page</h3>} />
        <Route path='/about' element={<h3>React About Page</h3>} />
      </Routes>
    </BrowserRouter>

 

4、修改webpack的配置

（1）安装插件 @rescripts/cli，当然也可以选择其他的插件，例如 react-app-rewired。

npm i -D @rescripts/cli

（2）根目录新增 .rescriptsrc.js：

　　1）、

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.globalObject = 'window';

    return config;
  },

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

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

    return config;
  },
};

 

（3）修改 package.json：

　　1）可在start配置中指定运行的端口号

　　　  set PORT=3001 && rescripts start

-   "start": "react-scripts start",
+   "start": "rescripts start",
-   "build": "react-scripts build",
+   "build": "rescripts build",
-   "test": "react-scripts test",
+   "test": "rescripts test",
-   "eject": "react-scripts eject"

　

根据qiankun文档进行配置后，启动子应用遇到的问题

a、

 

 原因：是 eslint 的问题， webpack_public_path 不是全局变量所导致的

解决办法：在 子应用 package.json 文件中 eslintConfig 配置全局变量后 重起服务

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

 

b、

'react-scripts' 不是内部或外部命令，也不是可运行的程序 或批处理文件

 解决办法：yarn add react-scripts  重启项目

c、

configuration has an unknown property ‘jsonpFunction‘

原因：**在2020-10-10发布的webpack 5中已将 output.jsonpFunction 更名为 output.chunkLoadingGlobal​​​​​​​

Webpack 5 确实会从 package.json name 中自动推断出一个唯一的构建名称，并将其作为 output.uniqueName 的默认值。

这个值用于使所有潜在的冲突的全局变量成为唯一。

迁移: 由于 package.json中有唯一的名称，可将output.jsonpFunction` 删除。