一、新建主应用 (react)
yarn add qiankun
然后主应用中index.js 配置子应用注册
//注册子应用
registerMicroApps([
{
name: 'ReactApp',
entry: '//localhost:3001',
//显示子应用容器的id
container: '#container',
activeRule: '/react-app'
}
])
//启动qiankun
start()
在主应用的app.js 中
function getItem (label, key, icon, children) {
return {
key,
icon,
children,
label,
}
}
const items = [
getItem(<Link to="/react-app">react-app</Link>, '1', <PieChartOutlined />),
getItem(<Link to="/react-app/userList">userList</Link>, '2', <PieChartOutlined />),
]
const App = () => {
const [collapsed, setCollapsed] = useState(false)
const [user, setUser] = useState()
useEffect(() => {
mitter.addListener('user', msg => {
setUser(msg)
})
})
return (
<Layout
style={{
minHeight: '100vh',
}}
>
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
<div className="logo"> 当前用户:{user}</div>
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items}/>
</Sider>
<Layout className="site-layout">
<Header
className="site-layout-background"
style={{
padding: 0,
}}
/>
<Content
style={{
margin: '0 16px',
}}
>
{/* 子应用容器 */}
<div id="container" className="site-layout-background" style={{ minHeight: 360 }}></div>
</Content>
<Footer
style={{
textAlign: 'center',
}}
>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
)
}
处理容器导航。
子应用中
1、react为例 以脚手架构建的 我们首先yarn eject 把webpack暴露出来。进行修改配置
首先是文件loader 为了本地运行时能加载 直接使用publicPath 在真实项目 要判断production 然后地址为:
发布的链接 例如:https://www.baidu.com
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash].[ext]',
publicPath:"http://localhost:3001" 子应用链接
},
其他需要的loader都可以这样写。防止主应用拿不到子应用的静态资源。
在webpack的output中 我们要加入微应用配置
package里面的name要和注册应用的一致
// 微应用配置
library: `${packageName}`, ===》 const packageName = require('../package.json').name;
libraryTarget: 'umd',
然后在子应用的index.js加入新的生命周期 mount unmount bootstrap 详见qiankun官网。
同时运行主应用和子应用 简单的一个架子出来了