qiankun前端微服务 demo项目

---

一、创建项目

本文使用react项目作为主应用。一个vue项目、一个react项目作为微应用。

1.创建主应用react项目：base，输入cmd命令

create-react-app base

2.创建微应用1 vue项目：m-vue，输入cmd命令

vue create m-vue

如图所示选择手动配置

接下来的很多选择如图
3.创建微应用2 react项目：m-react，输入cmd命令

create-react-app m-react

二、主应用

1.先安装好react-router-dom和qiankun
输入cmd命令

$ yarn add react-router-dom 或 npm i react-router-dom
$ yarn add qiankun # 或者 npm i qiankun -S

2.在src文件夹下新建registerApp.js文件，注册微应用并启动：

import { registerMicroApps, start } from 'qiankun';

const loader = (loading) =>{
  console.log(loading)
}

registerMicroApps([
    {
      name: 'm-vue',
      entry: '//localhost:20000',
      container: '#container',
      activeRule: '/vue',
      loader
    },
    {
      name: 'm-react',
      entry: '//localhost:30000',
      container: '#container',
      activeRule: '/react',
      loader
    }
  ],{
    beforeLoad:()=>{
      console.log("加载前")
    },
    beforeMount:()=>{
      console.log("挂载前")
    }
  });
  
  // 启动 qiankun
  start();

3.在index.js文件中引入registerApp.js

import './registerApp.js';

4.修改App.js文件

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

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/vue">vue应用</Link>
        <Link to="/react">react应用</Link>
      </Router>
      {/**切换导航，将微应用渲染到container容器中 */}
      <div id="container"></div>
    </div>
  );
}

export default App;

三、vue微应用

1.在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

2.在src文件夹下的router文件夹下的index.js文件中的顶部引入public-path.js：

import '../public-path'
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]


export default routes

在顶部引入

3.入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue'
import routes from './router'

let history;
let router;
let app;

function render(props = {}) {
    history = createWebHistory('/vue');
    router = createRouter({
        history,
        routes
    });
    app = createApp(App);
    let { container } = props;
    app.use(router).mount(container ? container.querySelector('#app') : "#app")
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
    console.log('[vue] props from main framework', props);
    render(props);
}
export async function unmount() {
    console.log('[vue] vue app unmount');
    history = null;
    app = null;
    router = null;
}

4.打包配置修改（vue.config.js）：

const { name } = require('./package');

module.exports = {
  lintOnSave: false,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    },
  },
};

四、react微服务

以 create-react-app 生成的 react 项目为例，搭配 react-router-dom 5.x。
1.在 src 目录新增 public-path.js：

/* global __webpack_public_path__:writable */
if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

2.入口文件 index.js 修改，并在顶部引入public-path.js。为了避免根 id #root 与其他的 DOM 冲突，需要限制查找范围。

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


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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

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;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

4.修改 webpack 配置
安装插件 @rescripts/cli

npm i -D @rescripts/cli

根目录新增 .rescriptsrc.js：

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    
    return config;
  },

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

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    return config;
  },
};

修改 package.json：

-   "start": "react-scripts start",
+   "start": "rescripts start",
-   "build": "react-scripts build",
+   "build": "rescripts build",
-   "test": "react-scripts test",
+   "test": "rescripts test",
-   "eject": "react-scripts eject"

根目录新增 .env：

PORT = 30000
WDS_SOCKET_PORT = 30000