Micro front – end combat | technology review

preface

SingleSpa is a new layer of singleSpa. In addition to the dynamic introduction of singleSpa and application isolation capabilities, singleSpa also implements style isolation and static resource access.

The body of the

Since it is a micro front-end, there are naturally multiple front-end applications, and there is inevitably a chassis to bear these front-end applications, so we first build a good environment

Set up simulation environment

Lead the environment

• Vue’s grassroots hosting projects
• React microapplications

Begin to build

1. Select an empty folder as the root path

mkdir qiankun-study && cd qiankun-study
Copy the code

2. Create an QIANkun-Base (here VUE is used for easy access to UI framework; It’s both.)

vue create qiankun-base
Copy the code

If vUE scaffolding is not installed, run the following command to install it

npm i vue/@cli
Copy the code

3. Create a VUE project

vue create qiankun-vue
Copy the code

3. Create the React project

npx create-react-app qiankun-react
Copy the code

4. inqiankun-baseTo create a route in your project, introduce elementUi here to make it a little bit nicer

Notice the introduction of elementUI in main.js

npm i element-ui
Copy the code

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
  router,
  render: h= > h(App)
}).$mount('#app')

Copy the code

Then rewrite the main page

# App.vue <template> <div id="app"> <el-menu :router="true" mode="horizontal"> <el-menu-item Index ="/">Home</el-menu-item> <el-menu-item index="/vue">Vue application </el-menu-item> <el-menu-item Index ="/react">React </el-menu-item> </el-menu> // router-view </ / vue <div Id = "vue" > < / div > / / react project hardpoints < div id = "react" > < / div > < / div > < / template >Copy the code

Results the following

When we clicked on the other two routes, there was no response, which was normal, because we had not connected to the world. Recall that singleSpa had mount points, so we naturally needed to implement the launcher application, support packaging as lib and register in the main application, which was what Qiankun helped us to do

Enter the second link: access Qiankun

Access qiankun

First, the qiankun-base was connected

The introduction of qiankun

import {
  registerMicroApps,
  start
} from 'qiankun';
Copy the code

Define the child application to register

const apps = [
  {
    name: 'vueApp'.entry: '//localhost:10000'.// The js inside the HTML parse will be loaded by default to perform the fetch load dynamically (so the child application must support cross-domain).
    container: '#vue'./ / container
    activeRule: '/vue'.// Active path
    props: {
      a: 1}}, {name: 'reactApp'.entry: '//localhost:20000'.// The js inside the HTML parse will be loaded by default to perform the fetch load dynamically (so the child application must support cross-domain).
    container: '#react'./ / container
    activeRule: '/react' // Active path}]Copy the code

Register the application and start it

// Register the application
registerMicroApps(apps);

start({
  prefetch:false // Turn off preloading
}) / / open qiankun
Copy the code

Support is then provided in sub-applications, mainly by exposing functions according to protocol, packaging formats, and cross-domain support

Vue applications

Exposure to function

let instance = null;

// Render function
function render() {
  instance = new Vue({
    router,
    render: h= > h(App)
  }).$mount('#app');  // This is mounting to its OWN HTML and the base is going to take this mounted HTML and insert it into it
}


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


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

export async function unmount() {
  instance.$destroy();
}
Copy the code

Set the packaging format and cross domain

Create the vue.config.js file in the root directory

module.exports = {
  devServer: {
    port: 10000.headers: {
      'Access-Control-Allow-Origin': The '*',}},configureWebpack: {
    output: {
      library: `vueApp`.libraryTarget: 'umd'.// Package microapplications into umD library format}},}Copy the code

The React application

Exposure to function

import React from 'react'; import ReactDOM, { render } from 'react-dom'; import './index.css'; import App from './App'; function reactRender() { ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); } if (! window.__POWERED_BY_QIANKUN__) { reactRender(); }else { } export async function bootstrap() { } export async function unmount() { ReactDOM.unmountComponentAtNode( document.getElementById('root') ); } export async function mount() { reactRender(); }Copy the code

Set the packaging format and cross domain

Install the react-app-rewired package first

npm i react-app-rewired
Copy the code

Then, create a file config-overrides. Js under the root path of the project (the same as package.json) to override the configuration

module.exports = {
    webpack: (config) = > {
        config.output.library = 'reactApp';
        config.output.libraryTarget = 'umd';
        config.output.publicPath = 'http://localhost:20000';
        return config;
    },
    devServer: (configFunction) = > {
        return function (proxy,allowedHost) {
            const config = configFunction(proxy,allowedHost);
            config.headers = {
                'Access-Control-Allow-Origin': The '*'
            }
            return config
        }

    }
}
Copy the code

Finally, rewrite the react-scripts for all scripts to react-app-rewired

"scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"."eject": "react-app-rewired eject"
},
Copy the code

So far, we have completed the access of Qiankun, and the effect is as follows

A link to the

SingleSpa of actual combat

Self-implementation of microfront-end singleSpa

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign