微前端，qiankun的简单搭建

微前端，qiankun的简单搭建（仅限开发环境，没验证过生产环境）

主应用

1使用react搭建基座应用reactmain

create-react-app reactmain
1

2.安装qiankun

npm i qiankun -S
1

3.删除没有用的文件
4.添加路由，运行程序

npm i react-router-dom -S
1

5.创建registerApps.js

import { registerMicroApps, start } from 'qiankun';

const loader = (loading) => {
  console.log(loading);
}
registerMicroApps([
  {
    name: 'm-react',
    entry: '//localhost:3002',
    container: '#container',
    activeRule: '/react',
    loader,
    //props
  }
], {
  beforeLoad: () => {
    console.log("加载前。。。");
  },
  beforeMount: () => {
    console.log("挂载前。。。");
  }
});
start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注：子应用接入qiankun
导出三个必要的生命周期钩子函数，不用安装qiankun

创建微应用react

1.使用react搭建微应用react版本18

create-react-app m-react
1

2.修改webpack配置

npm i -D @rescripts/cli
1

注意安装时会遇到安装不成功react-scripts版本过高，安装不上，修改版本到4.0.3
在根目录下创建.rescriptsrc.js文件

module.exports = {
  webpack: (config) => {
    config.output.library = `m-react`;
    config.output.libraryTarget = 'umd';
    config.output.globalObject = 'window';
    // config.output.publicPath = '//localhost:3008'
    
    return config;
  },

  devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;
    
    return config;
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.导入生命周期，18版的createRoot渲染不出来组件，猜测是降了react-scripts的版本导致的，暂用17版本的

import React from 'react';
// import { createRoot } from 'react-dom/client';
import ReactDOM from "react-dom";
import './index.css';
import App from './App';

function render(props) {
  const { container } = props;
  console.log("方法进入，开始渲染");
  const list = container ? container.querySelector('#root') : document.querySelector('#root');
  // const root = createRoot(list);
  // root.render();
  ReactDOM.render(<App />, list);
}
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;
  console.log("卸载。。。")
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
  // root.unmount()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

创建vue微应用（3.x新版本+ts）

1.安装vue脚手架

npm install -g @vue/cli
1

2.创建项目

vue create x-vue
1

3.修改vue.config.js的配置

module.exports = {
  devServer: {
    port: 3003,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `m-vue`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      // jsonpFunction: `m-vue`,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.修改router/index.ts文件

- const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
- })
- export default router
+ export default routes
1
2
3
4
5
6

4.在main.js文件中修改render,暴露出生命周期函数

import { createApp, toRaw } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue'
import routes from './router'
import store from './store';
// import './public-path';//这个文件在开发环境中没有用到
// createApp(App).use(store).use(routes).mount('#app');
// 
let history;
let app;
let router;
function render(props: any) {
  // @ts-ignore
  history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue':'/');
  router = createRouter({
    history,
    routes
  })
  app = createApp(App);
  const { container } = props;
  app.use(router).mount(container ? container.querySelector('#app') : '#app');
}

// @ts-ignore
// if (window.__POWERED_BY_QIANKUN__) {
//    //@ts-ignore  // eslint-disable-next-line no-undef
//   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
// }
// 独立运行
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}
// 引入钩子函数
export async function bootstrap() {
  console.log('%c ', 'color: green;', '[vue] react app bootstraped');
}

//挂载
export async function mount(props: any) {
  console.log('%c ', 'color: green;', '[vue3.0] props from main framework');
  render(props);
}

//卸载
export async function unmount() {
  //const { container } = props;
  console.log("卸载。。。")
  history = null;
  app = null;
  router = null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

5.在判断子应用是独立运行还是处于微应用环境中

// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}
1
2
3
4

创建webpack+react+ts微应用

遇到问题，找不到生命周期，webpack5.x+react18，react项目搭建过程参考

output: {
    filename: 'js/[name].js',
    path: path.resolve(PROJECT_PATH, './dist'),
    publicPath: '/',
    //解决：增加下面两行
    library: "tsreact",//项目名称，package.json中的name
    libraryTarget: 'umd',
  },
1
2
3
4
5
6
7
8