如何使用qiankun开发React微应用

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

?

1 2 3

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

?

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 36 37 38 39

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：

?

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

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

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

?

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

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

?

1 2 3 4 5 6 7

<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。

?

1	npm i -D @rescripts/cli

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

　　1）、

?

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

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

?

1 2 3 4 5 6 7

-   "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 配置全局变量后 重起服务

?

1 2 3 4 5 6

"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` 删除。