微前端-qiankun

react作为主应用
npx create-react-app react-main
npm i react-router-dom qiankun

registerApp.js

import { registerMicroApps, start } from 'qiankun'
registerMicroApps([
    {
        name: 'reactApp',
        entry: '//localhost:10000',
        container: '#container',
        activeRule: '/react'
    },
    {
        name: 'vueApp',
        entry: '//localhost:5173',
        container: '#container',
        activeRule: '/vue'
    }
], {
    beforeLoad() {

    },
    beforeMount() {

    },
    afterMount() {

    },
    beforeUnmount() {

    },
    afterUnmount() {

    }
})

start()

index.js

import './registerApp'

App.js

import './App.css';
import { BrowserRouter, Link } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/react" >react</Link>
        <Link to="/vue" >vue</Link>
      </BrowserRouter>
      <div id='container'></div>
    </div>
  );
}

export default App;

子应用
react

npm i rescripts/cli

index.js

import './public-path'
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


function render(props) {
  const container = props.container
  const root = ReactDOM.createRoot(container?container.querySelector('#root') : document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

if(!window.__POWERED_BY_QIANKUN__) {
  render({})
}

export async function bootstrap() {

}
export async function mount(props) {
  render(props)
}
export async function unmount() {
  
}

public-path.js

if(window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

.env

PORT=10000
WDS_SOCKET_PORT=10000

.rescriptsrc.js

module.exports = {
    webpack: (config) => {
        config.output.libraryTarget = 'umd'
        config.output.library = 'react-f'
        return config
    },
    devServer: config => {
        config.headers = {
            "Access-Control-Allow-Origin": "*"
        }
        return config
    }

}

<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/child-one' : '/'}>

package.json

"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",
"eject": "rescripts eject"

vite 安装的vue3

npm create vue@latest
npm i vite-plugin-qiankun

main.ts

import './public-path'
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from 'vue-router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
let app: any
let history: any
let router
function render(props: any) {
    app = createApp(App)
    app.use(createPinia())
    history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/vue' : '/')
    router = createRouter({
        history,
        routes
    })
    app.use(router)
    const container = props.container
    app.mount(container ? container.querySelector('#app') : '#app')
}



renderWithQiankun({
    mount(props) {
        render(props)
    },
    bootstrap() {
        console.log('props')
    },
    update() {

    },
    unmount() {
        app.unmount()
        history.destroy()
        app = null
        router = null
    }
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render({})
}

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    qiankun('vueApp', {useDevMode: true})
  ],
  server: {
    // 开发阶段静态资源加载问题
    origin: '//localhost:5173'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

vue-cli创建vue3项目
vite.config.ts

  devServer: {
    port: 20000,
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
  },
  configureWebpack: {
    output: {
      libraryTarget: 'umd',
      library: 'vue-f'
    }
  },

public-path.js

if(window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from 'vue-router'
let app: any
let history: any
let router
function render(props: any) {
    app = createApp(App)
    app.use(createPinia())
    history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue' : '/')
    router = createRouter({
        history,
        routes
    })
    app.use(router)
    const container = props.container
    app.mount(container ? container.querySelector('#app') : '#app')
}

if(!window.__POWERED_BY_QIANKUN__) {
    render({})
  }
  
  export async function bootstrap() {
  
  }
  export async function mount(props) {
    render(props)
  }
  export async function unmount() {
    app.unmount()
    history.destroy()
    app = null
    router = null
  }

static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="static"></div>
    <script entry>
        const app = document.getElementById('static')
        function render() {
            app.innerHTML = 'static-f'
        }

        if(!window.__POWERED_BY_QIANKUN__) {
            render({})
        }
        window['static-f'] = {
            bootstrap: async () => {

            },
            mount: async () => {
                render({})
            },
            unmount: async () => {
                app.innerHTML = ''
            },
        }
    </script>
</body>
</html>

http-server --port 3000 --cors
app.js

import './App.css';
import { BrowserRouter, Link } from 'react-router-dom'
import { loadMicroApp } from 'qiankun'
import React from 'react'

function App() {

  const containerRef = React.createRef()

  React.useEffect(() => {
    loadMicroApp({
      name: 'static-f',
      entry: '//localhost:30001',
      container: containerRef.current
    })
  })
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/react" >react</Link>
        <Link to="/vue" >vue</Link>
      </BrowserRouter>
      <div ref={containerRef}></div>
      <div id='container'></div>
    </div>
  );
}

export default App;