测试文章 13 - 微前端架构实践

1
// 主应用
2
import { registerMicroApps, start } from 'qiankun'
3

4
registerMicroApps([
5
  {
6
    name: 'reactApp',
7
    entry: '//localhost:3000',
8
    container: '#container',
9
    activeRule: '/react',
10
  },
11
  {
12
    name: 'vueApp',
13
    entry: '//localhost:8080',
14
    container: '#container',
15
    activeRule: '/vue',
16
  },
17
])
18

19
start()

1
// webpack.config.js
2
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: 'host',
8
      remotes: {
9
        app1: 'app1@http://localhost:3001/remoteEntry.js',
10
        app2: 'app2@http://localhost:3002/remoteEntry.js',
11
      },
12
      shared: ['react', 'react-dom'],
13
    }),
14
  ],
15
}

1
// 发布
2
window.dispatchEvent(new CustomEvent('micro-app-event', {
3
  detail: { type: 'login', data: userInfo }
4
}))
5

6
// 订阅
7
window.addEventListener('micro-app-event', (e) => {
8
  console.log(e.detail)
9
})