初次使用qiankun
（本地开发）
## 主应用react cra
应用 my-app-main
## 微应用react cra
应用 my-app-sub
## my-app-main 需要配置内容
1. 安装qiankun
yarn add qiankun
2. 注册微应用并启动
```
入口文件 index.js中
import { registerMicroApps, start} from 'qiankun';
registerMicroApps([
{
name: 'reactapp', // app name registered
entry: 'http://localhost:7001',
container: '#subapp', // 注册微应用的容器
activeRule: '/test', // 激活微应用配置的url
}
]);
start();
```
3. 在APP.js修改 [与微应用注册信息一致]
```
<div id="subapp">
<Link to='/test'> test</Link>
</div>
```
## my-app-sub 需要配置的内容
1. 因为需要需改webpack，所以安装了react-app-rewired
在根目录写config-overrides.js来修改配置
```
const { name } = require('./package');
module.exports = {
webpack: function override(config, env) {
config.entry = config.entry.filter(
(e) => !e.includes('webpackHotDevClient')
);
config.output.library = `${name}-[name]`;
config.output.libraryTarget = 'umd';
config.output.jsonpFunction = `webpackJsonp_${name}`;
return config;
},
devServer: (configFunction) => {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.open = false;
config.hot = false;
config.headers = {
'Access-Control-Allow-Origin': '*',
};
return config;
};
}
}
```
2. 在package.json中修改脚本信息
```
"start": "PORT=7001 react-app-rewired start",
```
注意这里的port端口和主应用中配置的端口保持一直
3. 在src中添加public-path.js文件
```
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
```
4. 修改index.js文件
```
import './public-path'
function render(props) {
const {container} = props;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
container ? container.querySelector('#app') : document.getElementById('root')
);
}
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
export async function bootstrap() {
console.log('[react16] react app bootstraped');
}
export async function mount(props) {
console.log('[react16] props from main framework', props);
render(props);
}
export async function unmount(props){
const {container} = props
ReactDOM.unmountComponentAtNode( container ? container.querySelector('#app') : document.querySelector('#root'));
}
// 这里我把微应用的根容器修改为app了
```
最后启动主应用和微应用，就可以看到如下界面
