初次使用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了 ``` 最后启动主应用和微应用，就可以看到如下界面

 

 

   

标签：function,container,name,app,使用,qiankun,初次,props,config
来源： https://www.cnblogs.com/dancefinger/p/15843010.html