如何使用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配置中指定运行的端口号
- "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` 删除。