Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

What is a micro front end?

The micro front end is a kind of technical means and method strategy that multiple teams jointly build modern Web applications by releasing functions independently.

Microfront-end core

  1. Stack independent
  • The main framework does not limit the technology stack of access applications, and microapplications have full autonomy.
  1. Independent development and deployment
  • The microapplication repository is independent, and the front and back ends can be independently developed. After deployment, the main framework can automatically complete synchronous update.
  1. The incremental upgrade
  • In the face of a variety of complex scenarios, it is usually difficult to upgrade or reconstruct the existing system completely, and the micro front end is a very good means and strategy to implement the gradual reconstruction.
  1. Independent run time
  • State is isolated between each microapplication and run time state is not shared.

What does the micro front end solve

The micro front-end architecture aims to solve the problem of non-maintenance of single application in a relatively long time span, when it evolves from a common application to a monolite application due to the increase and change of people and teams involved. This type of problem is especially common in enterprise Web applications.

1. Understand the qiankun of micro front-end solutions

qiankun.umijs.org/zh

What is Qiankun?

Qiankun is a single-SPa-based microfront-end implementation library that aims to make it easier and painless to build a production-ready microfront-end architecture system.

The characteristics of

  1. Simple: Any JS framework can be used. Microapplication access is as simple as accessing an IFrame system, but it is not an IFrame.
  2. Complete: Includes almost all the basic capabilities needed to build a microfront-end system, such as style isolation, JS sandbox, preloading, and so on.
  1. Production available: it has been tested and polished by a sufficient number of on-line systems inside and outside the ant, and its robustness is reliable.

features

  • Based on single – spa
  • Stack independent
  • HTML Entry Access mode
  • Style isolation
  • JS sandbox
  • Resource preloading
  • Umi plug-in system

Install qiankun

npm i qiankun -S

2. Start to build the micro front end project

1. Project environment construction

  1. Start by creating a Vue2.0 project as the base

vue create qiankun-base

  1. Then create a VUe2.0 project as subproject 1

vue create qiankun-vue

  1. Create a React project as subproject 2

npx create-react-app qiankun-react

  1. Install element-UI under the Qiankun-Base directory as the project UI

npm i element-ui -S

2. Configure the main application qiankun-Base

  1. Configuration navigation bar

After introducing the Element style, use its menu bar and configure the route accordingly.

<! <template> <div> <! Use element menu bar --> <el-menu :router="true" mode="horizontal"> <! Can put their own routing in - base - - > < el menu - item index = "/" > Home < / el menu - item > <! <el-menu-item index="/vue"> Vue app </el-menu-item> <el-menu-item index="/react"> React app </el-menu-item> </el-menu> <! - page rendering - > < the router - the view > < / router - the view > < div id = "vue" > < / div > < div id = "react" > < / div > < / div > < / template >Copy the code

Effect of the page

  1. Introducing and configuring the Qiankun

After installing the Qiankun, configure the sub-application in main.js

Const apps = [// subapp 1: // Sub-app name name: 'vueAPP', // sub-app entry; default will load the HTML // and parse the JS inside and dynamically execute (sub-app must support cross-domain) entry: '//localhost:1001', // mount child application to #vue element container: '#vue', // Activation rule: Mount child application to #vue when accessing /vue activeRule: '/vue'}, // subapp 1: qiankun-react {// subapp name: 'reactAPP', // child app entry; default will load the HTML // and parse the js inside and then dynamically execute (child app must support cross-domain) entry: '//localhost:1002', // mount child application to #react element container: '#react', // Activate rule: mount child application to #react activeRule when accessing /react: '/react'}] // register sub-apps (apps)Copy the code

3. Configuration sub-application 1 qiankun-Vue

It is important to note that there is no need to install any additional packages to configure the sub-applications. This is done internally. We just need to configure it.

  1. The router configuration

  1. The main js configuration
// let instance = null; Function render() {instance = new Vue({router, render: (h) => h(App),}).$mount("# App "); // The base will take the attached HTML and insert it into the main application. Window.__powered_by_qiankun__) {// If not in qiankun, render() directly; } // Three lifecycle hooks need to be exported inside Qiankun for the master application to call at the right time. // The first entry; Props contains parameters passed by the main application, as well as node information created for the child application. Export async function bootstrap() {console.log(" async function bootstrap "); } // export async function mount(props) {// Render (props); } // export async function unmount() {// Destroy (); }Copy the code
  1. Vue.config. js configures the packaging environment

Create the vue.config.js file for configuration

Module. exports = {// devServer: {// listen on port: Headers :{access-Control-allow-origin :{access-control-allow-origin :{access-control-allow-origin :{access-control-allow-origin :{access-control-allow-origin :{access-control-allow-origin: ConfigureWebpack :{output: {library: 'vueApp', libraryTarget: 'umd'}Copy the code
  1. The effect

4. Configure sub-application 2 Qiankun – React

  1. Install the react – app – rewired

// Install YARN first

npm i yarn -g

// Install react-app-rewired

yarn add react-app-rewired

  1. Once installed, change the boot options to react-app-rewired

  1. Create the config-overrides. Js configuration file
module.exports = {
    webpack:(config) => {
        config.output.library = 'reactApp'
        config.output.libraryTarget = 'umd'
        config.output.publicPath = 'http://localhost:1002'
        return config
    },
    devServer:(configFunction) => {
        return function(proxy, allowedHost){
            const config = configFunction(proxy, allowedHost)
            config.port = '1002'
            config.headers = {
                "Access-Control-Allow-Origin" : '*'
            }
            return config
        }
    }
}
Copy the code
  1. Configuration indx. Js
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; function render() { ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); } if (! window.__POWERED_BY_QIANKUN__) { render(); Export async function bootstrap() {} export async function mount() {render(); } export async function unmount() { ReactDOM.unmountComponentAtNode(document.getElementById("root")); }Copy the code
  1. The effect

Three, error reporting collection

1. The event ‘vueApp’ died in status NOT_MOUNTED: [Qiankun]: Target container with #vue

Vue2 will be the outermost

In vue3, just delete the outermost div

2. ‘webpack_public_path‘ is not defined no-undef

I do not know why this BUG appears, I see other tutorial articles will not appear, I do not know if there is anyone like me encountered this BUG.