微前端解决的问题

问题：

  • 现代网站越来越复杂：业务功能越来越多，开发人员越来越多
  • 软件工程中，工程问题开始大于软件本身的技术问题
  • 这个时候需要一种解决方案来降低工程的复杂性

理论支撑：

  • 由“康威定律”知系统的复杂度主要取决于系统之间的沟通方式
  • 人越多，沟通越多，协同越多，效率越低，内耗越高
  • 软件组件和模块越多，之间的交互越多，，效率越低，内耗越高
  • 降低内耗的有效方式是减少沟通成本（降低沟通或干脆不沟通）

解决方案：

  • 解耦：后端微服务，前端微前端，微前端是把后端技术范式“微服务”扩展到了前端，目的还是“解耦”
  • 对技术的解耦，本质是对人的解耦。
  • 把一个网站分成多个模块，每个模块由独立的团队完成，各团队之间沟通减少，内部依赖性高，即技术和架构上的“高内聚低耦合”。
  • 同时，各团队之间技术选型可以不一样，每个团队选择适合自己团队的技术框架实现，用最合适的、成本最低的方式实现网站。

补充说明：
当然，任何技术都没有银弹，合适场景下选适合的技术。

微前端落地实现

技术选型

  • 微前端框架：qiankun
  • 开发环境：IDEA（不用vscode）

    环境准备

    ```shell

    准备开发环境

    安装nodejs

    下载地址：http://nodejs.cn/download/

    根据你的操作系统，安装合适的nodejs

    安装完的nodejs默认带包管理器npm

npm设置淘宝镜像源,国内网络环境不好

首先查看当前镜像源

npm config get registry

设置淘宝镜像源

npm config set registry https://registry.npm.taobao.org

需要换回时改为官方的镜像源

npm config set registry https://registry.npmjs.org

不用npm，安装包管理器yarn

npm install -g yarn

集成开发工具

安装IDEA，也安装vscode

  1. <a name="h6th7"></a>
  2. # 创建项目并实践微前端
  3. 我们使用多种技术框架创建多个demo，区分为使用打包工具webpack打包的和不适用webpack打包的
  5. 使用webpack打包的，是使用nodejs现代技术，比如vue、react、angular等框架组件化、模块化开发的<br />不使用webpack打包的，是传统老项目，比如jQuery，HTML，CSS，js开发的静态网站，或者php，JSP等后端渲染技术的网站也归属于这类。
  7. 创建多个项目：
  9. - vue2：vue2框架搭建的demo，绑定端口**8001**
  10. - vue3：vue3框架创建的demo，绑定端口**8002**
  11. - react：react框架创建的demo，绑定端口**8003**
  12. - angular：angular框架创建的demo，绑定端口**8004**
  13. - h5：非webpack打包的，纯html静态网站（代表老旧网站，使用html+css+js写的静态页面，另外php，JSP，jQuery等等也等同），绑定端口**8005**
  15. 然后我们选其中一个demo为主应用，其他demo为子应用，扩展为微前端架构<br />我实验了vue2和react做主应用，其他自己实验吧，举一反三
  17. - 选vue2为主应用，绑定端口**8000**
  18. - 选react为主应用，绑定端口**9000**
  20. <a name="FxVEQ"></a>
  21. ## 创建一个工作区
  22. ```shell
  23. # 创建一个目录作为工作区
  24. mkdir micro-frond-ends-demo
  25. cd micro-frond-ends-demo

创建vue2-demo

  1. ###安装vue-cli
  2. # 文档：https://cli.vuejs.org/zh/guide/installation.html
  3. npm install -g @vue/cli
  5. # 创建vue2-demo
  6. vue create vue2-demo
  7. cd vue2-demo
  9. # 修改绑定端口为8001
  10. # 创建一个与package.json同级的文件vue.config.js并添加如下内容
  11. module.exports = {
  12.     devServer: {
  13.         port: 8001 //修改为你需要的端口
  14.     }
  15. }
  17. # 启动项目
  18. yarn serve

打开: http://localhost:8001/
image.png

创建vue3-demo

  1. # 创建vue3-demo
  2. vue create vue3-demo
  3. cd vue3-demo
  5. # 更改端口绑定为8002
  6. # 创建一个与package.json同级的文件vue.config.js并添加如下内容
  7. module.exports = {
  8.     devServer: {
  9.         port: 8002 //修改为你需要的端口
  10.     }
  11. }
  13. # 启动项目
  14. yarn serve

打开地址： http://localhost:8002/
image.png

创建react-demo

  1. # npx是 npm 5.2+ 附带的 package 运行工具
  2. # 文档：https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app
  3. npx create-react-app my-app
  5. # 修改端口绑定到8003
  6. # package.json的scripts执行前增加环境变量
  7. # windows：set PORT=8003 && react-scripts start
  8. # linux或macos：PORT=4003 react-scripts start
  9. "serve": "set PORT=8003 && react-scripts start",
  11. # 启动项目
  12. yarn serve

打开地址：http://localhost:8003
image.png

创建angualr-demo

  1. # 安装angualr-cli
  2. # 文档：https://angular.cn/cli
  3. npm install -g @angular/cli
  5. #创建项目
  6. ng new angualr-demo
  8. # 修改端口
  9. # package.json文件scripts增加
  10. "serve": "ng serve --port 8004"
  12. # 启动项目
  13. yarn serve

打开地址： http://localhost:8004/
image.png

创建静态h5-demo

创建一个简单的html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5静态页面</title>
  6.     <script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <div class="content">
  10.     <h1>h5-demo</h1>
  11.     静态HTML页面示例
  12. </div>
  13. <div class="h5-content">
  14. </div>
  15. <style>
  16.     .content {
  17.         text-align: center;
  18.         font-size: large;
  19.         padding: 200px 0;
  20.     }
  21. </style>
  22. </body>
  24. </html>

为了方便启动，安装一个简单的http-server，然后配置可以跨域访问，新建package.json

  1. {
  2.   "name": "h5-demo",
  3.   "version": "1.0.0",
  4.   "main": "index.html",
  5.   "scripts": {
  6.     "serve": "cross-env PORT=8005 http-server . --cors",
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "author": "",
  10.   "license": "MIT",
  11.   "devDependencies": {
  12.     "cross-env": "^7.0.2",
  13.     "http-server": "^0.12.1"
  14.   }
  15. }

启动项目

  1. # 安装依赖
  2. yarn
  4. #启动项目
  5. yarn serve

访问地址：http://localhost:8005/
image.png

改造为微前端

image.png

我们做一个如上图的主应用，中间content部分替换为子应用

使用布局Layout：
image.png
使用导航菜单Menu：
image.png

主应用使用vue

  1. # 创建一个vue2的项目
  2. vue create main-vue
  3. cd main-vue
  5. # 安装ant desgin vue
  6. yarn add  ant-design-vue
  8. ##### 引入ant并创建布局，App.vue改为
  9. <template>
  10.   <a-layout id="components-layout-demo-top-side">
  12.     <a-layout-header class="header">
  13.       <a-menu theme="dark" mode="horizontal">
  14.         <a-menu-item key="1"><a href="/home">首页</a></a-menu-item>
  15.         <a-menu-item key="2"><a href="/vue2">vue2示例</a></a-menu-item>
  16.         <a-menu-item key="3"><a href="/vue3">vue3示例</a></a-menu-item>
  17.         <a-menu-item key="4"><a href="/react">react示例</a></a-menu-item>
  18.         <a-menu-item key="5"><a href="/angular">angular示例</a></a-menu-item>
  19.         <a-menu-item key="6"><a href="/h5">h5示例</a></a-menu-item>
  20.       </a-menu>
  21.     </a-layout-header>
  23.     <a-layout-content>
  24.       <a-layout-content class="content">
  25.         <div id="subapp">
  26.           Content 内容
  27.         </div>
  28.       </a-layout-content>
  29.     </a-layout-content>
  31.     <a-layout-footer style="text-align: center;color:white;background-color: #1a1919">
  32.       Ant Design ©2018 Created by Ant UED
  33.     </a-layout-footer>
  35.   </a-layout>
  36. </template>
  38. <style>
  39. #subapp {
  40.   text-align: center;
  41.   min-height: 800px;
  42. }
  43. </style>
  45. <script>
  47. export default {
  48.   name: 'App',
  49. }
  50. </script>
  53. ##### 注册为qiankun主应用
  54. #创建子应用路由数组  apps.js
  55. module.exports = [
  56.     {
  57.         name: 'vue2-demo',
  58.         entry: '//localhost:8001',
  59.         container: '#subapp',
  60.         activeRule: '/vue2',
  61.     },
  62.     {
  63.         name: 'vue3-demo',
  64.         entry: '//localhost:8002',
  65.         container: '#subapp',
  66.         activeRule: '/vue3',
  67.     },
  68.     {
  69.         name: 'react-demo',
  70.         entry: '//localhost:8003',
  71.         container: '#subapp',
  72.         activeRule: '/react',
  73.     },
  74.     {
  75.         name: 'angular-demo',
  76.         entry: '//localhost:8004',
  77.         container: '#subapp',
  78.         activeRule: '/angular',
  79.     },
  80.     {
  81.         name: 'h5-demo',
  82.         entry: '//localhost:8005',
  83.         container: '#subapp',
  84.         activeRule: '/h5',
  85.     },
  86. ]
  88. # main.js注册子应用
  89. import Vue from 'vue'
  90. import App from './App.vue'
  91. import Antd from 'ant-design-vue';
  92. import 'ant-design-vue/dist/antd.css';
  93. // 为 Angular 微应用所做的 zone 包注入
  94. //Angular 运行依赖于 zone.js。
  95. // qiankun 基于 single-spa 实现，single-spa 明确指出一个项目的 zone.js 只能存在一份实例，所以我们在主应用注入 zone.js。
  96. //解决微应用是angualr式， zone.js 的问题
  97. //必须import 'zone.js/dist/zone'
  98. //安装命令：yarn add zone.js
  99. import "zone.js/dist/zone";
  101. import {registerMicroApps, start} from 'qiankun';
  102. import apps from './apps'
  106. Vue.config.productionTip = false
  109. Vue.use(Antd);
  111. new Vue({
  112.     render: h => h(App)
  113. }).$mount('#app')
  116. /** 微前端 **/
  118. //注册微应用
  119. registerMicroApps(apps);
  121. //设置默认进入的子应用
  122. // setDefaultMountApp('/h5');
  124. //启动微前端
  125. start();

改造微应用

建议一个一个的改造子应用，主应用中定义子路由的apps.js可以注释一部分，子应用一个一个的注册，调试

微应用vue2-demo

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

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

  2. 入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。 ```shell // import Vue from ‘vue’ // import App from ‘./App.vue’ // // Vue.config.productionTip = false // // new Vue({ // render: h => h(App), // }).$mount(‘#app’)

import ‘./public-path’; import Vue from ‘vue’; import App from ‘./App.vue’;

Vue.config.productionTip = false;

let instance = null;

function render(props = {}) { const {container} = props; instance = new Vue({ render: (h) => h(App), }).$mount(container ? container.querySelector(‘#app’) : ‘#app’); }

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

//qiankun生命周期钩子 export async function bootstrap() { console.log(‘[vue] vue app bootstraped’); }

export async function mount(props) { console.log(‘[vue] vue app mount’); console.log(‘[vue] props from main framework’, props); render(props); }

export async function unmount() { console.log(‘[vue] vue app unmount’); instance.$destroy(); instance.$el.innerHTML = ‘’; instance = null; }

  2. 3. 打包配置修改（vue.config.js）
  3. ```shell
  4. const {name} = require('./package.json');
  5. module.exports = {
  6.     devServer: {
  7.         port: 8001,//修改为你需要的端口
  8.         headers: {
  9.             'Access-Control-Allow-Origin': '*',
  10.         },
  11.     },
  12.     configureWebpack: {
  13.         output: {
  14.             library: `${name}-[name]`,
  15.             libraryTarget: 'umd', // 把微应用打包成 umd 库格式
  16.             jsonpFunction: `webpackJsonp_${name}`,
  17.         },
  18.     },
  19. };

微应用vue3-demo

基本跟vue2-demo一致，只是js改成了ts

  1. 在 src 目录新增 public-path.js ```shell if (window.POWERED_BY_QIANKUN) { // eslint-disable-next-line no-undef webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN; }
  2. 2. 入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。
  3. ```shell
  4. import './public-path';
  5. import {createApp} from 'vue';
  6. import App from './App.vue';
  8. let instance = null;
  11. function render(props = {}) {
  12.     const {container} = props;
  13.     instance = createApp(App);
  14.     instance.mount(container ? container.querySelector('#app') : '#app');
  15. }
  17. if (!window.__POWERED_BY_QIANKUN__) {
  18.     render();
  19. }
  21. export async function bootstrap() {
  22.     console.log('%c ', 'color: green;', 'vue3.0 app bootstraped');
  23. }
  25. function storeTest(props) {
  26.     props.onGlobalStateChange &&
  27.     props.onGlobalStateChange(
  28.         (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
  29.         true,
  30.     );
  31.     props.setGlobalState &&
  32.     props.setGlobalState({
  33.         ignore: props.name,
  34.         user: {
  35.             name: props.name,
  36.         },
  37.     });
  38. }
  40. export async function mount(props) {
  41.     storeTest(props);
  42.     render(props);
  43.     instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
  44.     instance.config.globalProperties.$setGlobalState = props.setGlobalState;
  45. }
  47. export async function unmount() {
  48.     instance.unmount();
  49.     instance._container.innerHTML = '';
  50.     instance = null;
  51. }
  1. 打包配置修改（vue.config.js） ```shell const {name} = require(‘./package’);

module.exports = { devServer: { port: 8002, //修改为你需要的端口 headers: { ‘Access-Control-Allow-Origin’: ‘*’, }, }, // 自定义webpack配置 configureWebpack: { output: { // 把子应用打包成 umd 库格式 library: ${name}-[name], libraryTarget: ‘umd’, jsonpFunction: webpackJsonp_${name}, }, }, };

  1. <a name="toks3"></a>
  2. ## 微应用react-demo
  4. 1. 在 src 目录新增 public-path.js
  5. ```shell
  6. if (window.__POWERED_BY_QIANKUN__) {
  7.     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  8. }
  1. 设置 history 模式路由的 base ```shell 
  2. 3. 入口文件 index.js 修改，为了避免根 id #root 与其他的 DOM 冲突，需要限制查找范围。
  3. ```shell
  4. // import React from 'react';
  5. // import ReactDOM from 'react-dom';
  6. // import './index.css';
  7. // import App from './App';
  8. // import reportWebVitals from './reportWebVitals';
  9. //
  10. // ReactDOM.render(
  11. //   <React.StrictMode>
  12. //     <App />
  13. //   </React.StrictMode>,
  14. //   document.getElementById('root')
  15. // );
  16. //
  17. // // If you want to start measuring performance in your app, pass a function
  18. // // to log results (for example: reportWebVitals(console.log))
  19. // // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  20. // reportWebVitals();
  23. import './public-path';
  24. import React from 'react';
  25. import ReactDOM from 'react-dom';
  26. import App from './App';
  28. function render(props) {
  29.     const { container } = props;
  30.     ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
  31. }
  33. if (!window.__POWERED_BY_QIANKUN__) {
  34.     render({});
  35. }
  37. export async function bootstrap() {
  38.     console.log('[react16] react app bootstraped');
  39. }
  41. export async function mount(props) {
  42.     console.log('[react16] react app mount');
  43.     console.log('[react16] props from main framework', props);
  44.     render(props);
  45. }
  47. export async function unmount(props) {
  48.     console.log('[react16] react app unmount');
  49.     const { container } = props;
  50.     ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
  51. }
  1. 修改 webpack 配置,安装插件 @rescripts/cli
    1. yarn add @rescripts/cli
    根目录新增 .rescriptsrc.js ```shell const { name } = require(‘./package’);

module.exports = { webpack: (config) => { config.output.library = ${name}-[name]; config.output.libraryTarget = ‘umd’; config.output.jsonpFunction = webpackJsonp_${name}; config.output.globalObject = ‘window’;

  1.     return config;
  2. },
  4. devServer: (_) => {
  5.     const config = _;
  7.     config.headers = {
  8.         'Access-Control-Allow-Origin': '*',
  9.     };
  10.     config.historyApiFallback = true;
  11.     config.hot = false;
  12.     config.watchContentBase = false;
  13.     config.liveReload = false;
  15.     return config;
  16. },

};

  1. 修改 package.json：
  2. ```shell
  4. -   "start": "react-scripts start",
  5. +   "serve": "set PORT=8003 && rescripts start",
  6. -   "build": "react-scripts build",
  7. +   "build": "rescripts build",
  8. -   "test": "react-scripts test",
  9. +   "test": "rescripts test",
  10. -   "eject": "react-scripts eject"

微应用angular-demo

接入angular较为繁琐，当然这对于选用angualr技术的团队来说，这不算什么。
我这边使用最新版angular，集成顺利

  1. ng version
  3.      _                      _                 ____ _     ___
  4.     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  5.    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  6.   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  7.  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
  8.                 |___/
  11. Angular CLI: 13.0.4
  12. Node: 16.13.0
  13. Package Manager: npm 8.1.0
  14. OS: win32 x64
  16. Angular:
  17. ...
  19. Package                      Version
  20. ------------------------------------------------------
  21. @angular-devkit/architect    0.1300.4 (cli-only)
  22. @angular-devkit/core         13.0.4 (cli-only)
  23. @angular-devkit/schematics   13.0.4 (cli-only)
  24. @schematics/angular          13.0.4 (cli-only)

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

    1. if (window.__POWERED_BY_QIANKUN__) {
    2. // eslint-disable-next-line no-undef
    3. __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    4. }

  2. 设置 history 模式路由的 base，src/app/app-routing.module.ts 文件 ```shell

  • import { APP_BASE_HREF } from ‘@angular/common’; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule],
  • // @ts-ignore
  • providers: [{ provide: APPBASEHREF, useValue: window.__POWERED_BY_QIANKUN ? ‘/angular’ : ‘/‘ }] })
  2. 3. 修改入口文件，src/main.ts 文件。
  3. ```shell
  4. // import { enableProdMode } from '@angular/core';
  5. // import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  6. //
  7. // import { AppModule } from './app/app.module';
  8. // import { environment } from './environments/environment';
  9. //
  10. // if (environment.production) {
  11. //   enableProdMode();
  12. // }
  13. //
  14. // platformBrowserDynamic().bootstrapModule(AppModule)
  15. //   .catch(err => console.error(err));
  18. import 'public-path';
  19. import { enableProdMode, NgModuleRef } from '@angular/core';
  20. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  21. import { AppModule } from './app/app.module';
  22. import { environment } from './environments/environment';
  24. if (environment.production) {
  25.   enableProdMode();
  26. }
  28. let app: void | NgModuleRef<AppModule>;
  29. async function render() {
  30.   app = await platformBrowserDynamic()
  31.     .bootstrapModule(AppModule)
  32.     .catch((err) => console.error(err));
  33. }
  34. if (!(window as any).__POWERED_BY_QIANKUN__) {
  35.   render();
  36. }
  38. export async function bootstrap(props: Object) {
  39.   console.log(props);
  40. }
  42. export async function mount(props: Object) {
  43.   render();
  44. }
  46. export async function unmount(props: Object) {
  47.   console.log(props);
  48.   // @ts-ignore
  49.   app.destroy();
  50. }
  1. 修改 webpack 打包配置

先安装 @angular-builders/custom-webpack 插件，注意：angular 9 项目只能安装 9.x 版本，angular 10 项目可以安装最新版。

  1. yarn add @angular-builders/custom-webpack

在根目录增加 custom-webpack.config.js ，内容为：

  1. const {name} = require('./package');
  2. module.exports = {
  3.   devServer: {
  4.     headers: {
  5.       'Access-Control-Allow-Origin': '*',
  6.     },
  7.   },
  8.   output: {
  9.     library: `${name}-[name]`,
  10.     libraryTarget: 'umd',
  11.     //加这行 报错，去掉
  12.     // jsonpFunction: `webpackJsonp_${appName}`,
  13.   },
  14. };

修改 angular.json，将 [packageName] > architect > build > builder 和 [packageName] > architect > serve > builder 的值改为我们安装的插件，将我们的打包配置文件加入到 [packageName] > architect > build > options。

  1. - "builder": "@angular-devkit/build-angular:browser",
  2. + "builder": "@angular-builders/custom-webpack:browser",
  3.   "options": {
  4. +    "customWebpackConfig": {
  5. +      "path": "./custom-webpack.config.js"
  6. +    }
  7.   }
  11. - "builder": "@angular-devkit/build-angular:dev-server",
  12. + "builder": "@angular-builders/custom-webpack:dev-server",
  1. 解决 zone.js 的问题

在父应用引入 zone.js，需要在 import qiankun 之前引入。

  1. // 为 Angular 微应用所做的 zone 包注入
  2. //Angular 运行依赖于 zone.js。
  3. // qiankun 基于 single-spa 实现，single-spa 明确指出一个项目的 zone.js 只能存在一份实例，所以我们在主应用注入 zone.js。
  4. //解决微应用是angualr式， zone.js 的问题
  5. //必须import 'zone.js/dist/zone'
  6. //安装命令：yarn add zone.js
  7. import "zone.js/dist/zone";

将微应用的 src/polyfills.ts 里面的引入 zone.js 代码删掉。

  1. // import 'zone.js';  // Included with Angular CLI.
  1. 修正 ng build 打包报错问题，修改 tsconfig.json 文件，参考issues/431 ```shell
  • “target”: “es2015”,
  • “target”: “es5”,
  • “typeRoots”: [
  • “node_modules/@types”
  • ], ```
  1. 为了防止主应用或其他微应用也为 angular 时， 会冲突的问题，建议给 加上一个唯一的 id，比如说当前应用名称。

src/index.html ：

  1. - <app-root></app-root>
  2. + <app-root id="angular9"></app-root>

src/app/app.component.ts ：

  1. - selector: 'app-root',
  2. + selector: '#angular9 app-root',

特别说明：angular本身适配了single-spa,如果嫌弃angular接入步骤太繁琐，也可以选择使用 single-spa-angular 插件，参考single-spa-angular 的官网 和 angular demo。我尝试安装没有成功，各种报错。。。遂放弃。

微前端h5-demo

增加一个entry.js入口文件

  1. //声明一个入口文件，用于暴漏相对应的生命周期
  2. //额外创建一个script文件entry用于 export 相对应的 lifecycles
  4. const render = ($) => {
  5.     //页面渲染完了 执行操作 比如使用jQuery
  6.     $('#h5-content').html('Hello, render with jQuery');
  7.     return Promise.resolve();
  8. };
  10. ((global) => {
  11.     global['h5-demo'] = {
  12.         bootstrap: () => {
  13.             console.log('生命周期 bootstrap');
  14.             return Promise.resolve();
  15.         },
  16.         mount: () => {
  17.             console.log('生命周期 mount');
  18.             return render($);
  19.         },
  20.         unmount: () => {
  21.             console.log('生命周期 unmount');
  22.             return Promise.resolve();
  23.         },
  24.     };
  25. })(window);

index.html增加entry.js

  1. <script src="entry.js" entry></script>

npm管理多个项目

多个项目手工启动麻烦，使用npm管理
在主工作区micro-frond-ends-demo目录创建package.json

  1. cd micro-frond-ends-demo
  2. yarn init
  4. #然后安装npm-run-all  文档：https://github.com/mysticatea/npm-run-all
  5. yarn add npm-run-all --dev
  8. npm-run-all 提供了多种运行多个命令的方式，常用的有以下几个：
  9. --parallel: 并行运行多个命令
  10. --serial: 多个命令按排列顺序执行
  11. --continue-on-error: 是否忽略错误，添加此参数 npm-run-all 会自动退出出错的命令，继续运行正常的
  12. --race: 添加此参数之后，只要有一个命令运行出错，那么 npm-run-all 就会结束掉全部的命令
  15. ### 添加常用脚本
  16. "scripts": {
  17.     "all:install": "npm-run-all --serial install:*",
  18.     "all:serve": "npm-run-all --parallel serve:*",
  19.     "install:vue2-demo": "cd vue2-demo && yarn",
  20.     "install:vue3-demo": "cd vue3-demo && yarn",
  21.     "install:react-demo": "cd react-demo && yarn",
  22.     "install:angular-demo": "cd angular-demo && yarn",
  23.     "install:h5-demo": "cd h5-demo && yarn",
  24.     "install:main-vue2": "cd main-vue2 && yarn",
  25.     "serve:vue2-demo": "cd vue2-demo && yarn serve",
  26.     "serve:vue3-demo": "cd vue3-demo && yarn serve",
  27.     "serve:react-demo": "cd react-demo && yarn serve",
  28.     "serve:angular-demo": "cd angular-demo && yarn serve",
  29.     "serve:h5-demo": "cd h5-demo && yarn serve",
  30.     "serve:main-vue2": "cd main-vue2 && yarn serve"
  31.   }
  33.  # 安装全部项目依赖
  34.  yarn all:install
  36.  # 启动所有项目
  37.  yarn all:serve

改造完成 看下效果

首页 http://localhost:8000/home
image.png
vue2示例：http://localhost:8000/vue2
image.png
vue3示例：http://localhost:8000/vue3
image.png
react示例：http://localhost:8000/react
image.png
angular示例：http://localhost:8000/angular
image.png
h5示例：http://localhost:8000/h5
image.png

主应用使用react

布局依旧
image.png

  1. # 创建项目
  2. npx create-react-app main-react
  4. # 修改端口绑定到9000,package.json增加
  5. "serve": "set PORT=8003 && react-scripts start",
  7. # 启动项目
  8. yarn serve
  12. # 启动无问题后改造为微前端主应用
  14. ## 安装ant desgin 设置布局和导航栏
  15. yarn add antd
  17. # App.js改为
  18. import './App.css';
  19. import {Layout, Menu} from 'antd';
  20. const {Header, Content, Footer} = Layout;
  22. function App() {
  23.     return (
  24.         <div className="App">
  26.             <Layout className="layout">
  27.                 <Header>
  28.                     <div className="logo"/>
  29.                     <Menu theme="dark" mode="horizontal">
  30.                         <Menu.Item key="1"><a href="/home">首页</a></Menu.Item>
  31.                         <Menu.Item key="2"><a href="/vue2">vue2示例</a></Menu.Item>
  32.                         <Menu.Item key="3"><a href="/vue3">vue3示例</a></Menu.Item>
  33.                         <Menu.Item key="4"><a href="/react">react示例</a></Menu.Item>
  34.                         <Menu.Item key="5"><a href="/angular">angular示例</a></Menu.Item>
  35.                         <Menu.Item key="6"><a href="/h5">h5示例</a></Menu.Item>
  36.                     </Menu>
  37.                 </Header>
  39.                 <Content style={{padding: '0 50px'}}>
  41.                     <div id="subapp">
  42.                         Content 内容
  43.                     </div>
  45.                 </Content>
  47.                 <Footer style={{textAlign: "center",color:"white",backgroundColor: "#1a1919"}}>
  48.                     Ant Design ©2018 Created by Ant UED
  49.                 </Footer>
  50.             </Layout>
  52.         </div>
  53.     );
  54. }
  56. export default App;
  58. # 把main-vue中的微应用路由apps.js拿过来
  60. # index.js注册微应用
  61. import React from 'react';
  62. import ReactDOM from 'react-dom';
  63. import './index.css';
  64. import App from './App';
  65. import reportWebVitals from './reportWebVitals';
  66. import apps from './apps'
  68. //解决微应用是angualr式， zone.js 的问题
  69. //必须import 'zone.js/dist/zone'
  70. //安装命令：yarn add zone.js
  71. import 'zone.js/dist/zone';
  73. import {registerMicroApps, start} from "qiankun";
  76. ReactDOM.render(
  77.     <React.StrictMode>
  78.         <App/>
  79.     </React.StrictMode>,
  80.     document.getElementById('root')
  81. );
  83. // If you want to start measuring performance in your app, pass a function
  84. // to log results (for example: reportWebVitals(console.log))
  85. // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  86. reportWebVitals();
  89. //qiankun 微前端
  91. registerMicroApps(apps);
  93. start();

启动看效果，简单截图几个如下：
image.png

image.png

image.png

默认浏览器打开

多项目统一管理，micro-frond-ends-demo下的package.json

  1. {
  2.   "name": "micro-frond-ends-demo",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "author": "",
  6.   "license": "MIT",
  7.   "scripts": {
  8.     "all:install": "npm-run-all --serial install:*",
  9.     "all:serve": "npm-run-all --parallel serve:*",
  11.     "install:micro-frond-ends-demo": "yarn",
  12.     "install:vue2-demo": "cd vue2-demo && yarn",
  13.     "install:vue3-demo": "cd vue3-demo && yarn",
  14.     "install:react-demo": "cd react-demo && yarn",
  15.     "install:angular-demo": "cd angular-demo && yarn",
  16.     "install:h5-demo": "cd h5-demo && yarn",
  17.     "install:main-vue2": "cd main-vue2 && yarn",
  18.     "install:main-react": "cd main-react && yarn",
  20.     "serve:vue2-demo": "cd vue2-demo && yarn serve",
  21.     "serve:vue3-demo": "cd vue3-demo && yarn serve",
  22.     "serve:react-demo": "cd react-demo && yarn serve",
  23.     "serve:angular-demo": "cd angular-demo && yarn serve",
  24.     "serve:h5-demo": "cd h5-demo && yarn serve",
  25.     "serve:main-vue2": "cd main-vue2 && yarn serve",
  26.     "serve:main-react": "cd main-react && yarn serve"
  27.   },
  28.   "devDependencies": {
  29.     "npm-run-all": "^4.1.5"
  30.   }
  31. }

应用启动后的默认动作

  1. ### react默认启动后会打开浏览器，关闭打开行为
  2. # 通过环境变量方式，在react项目根目录创建文件.env
  3. #关闭自动打开浏览器
  4. BROWSER=none
  6. #绑定端口
  7. PORT=9000
  10. ### vue默认启动后不打开浏览器，设置为打开
  11. # 通过修改vue.config.js文件配置
  12. module.exports = {
  13.     devServer: {
  14.         //绑定端口
  15.         port: 8000,
  16.         //默认打开浏览器
  17.         open: true,
  18.     }
  19. }
  21. ### angular通过命令行可以直接修改
  22. ng serve --port 8004 --open

本项目设置为：启动所有项目，然后浏览器打开main-vue项目

源代码

https://gitee.com/dakuohao/micro-frond-ends-demo

完

（完）