qiankun微前端初体验

一、新建主应用 (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官网。

同时运行主应用和子应用 简单的一个架子出来了