This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

Hello, everyone. In the previous article, WE shared some knowledge about the micro front end, including what is the micro front end, why to use the micro front end and how to realize a micro front end. At the end of the article, we also mentioned two libraries that can realize the micro front end: Single-SPA and Qiankun. Today we will take the example of qiankun+ Vue to implement a simple micro front end.

What is qiankun

  • Qiankun is a library based on single-SPA package, aiming to make it easier for everyone. More painless to build a production-usable micro-front-end architecture system.
  • Qiankun has the following main characteristics:
    • Simple to use, Qiankun is based on a single-SPA package and offers a more out-of-the-box API on top of that
    • Regardless of the technology stack, any technology stack application can use/access, be it React/Vue/Angular/JQuery or other frameworks
    • HTML Entry access allows you to access micro applications as easily as using iframe
    • Style isolation ensures that styles do not interfere with each other between microapplications
    • JS sandbox to ensure no global variable/event conflicts between microapplications
    • Resource preloading: Preloads unopened micro-application resources in idle time of the browser to speed up the opening of micro-applications

Why not use iframe

Iframe can also implement similar functions. We only need to configure the iframe, bind a SRC attribute, and embed the SRC corresponding application. So why not use the iframe, but make such a library separately? So let’s analyze the disadvantages of using iframe:

  • 1. The URL is not synchronized. The URL status of the iframe refreshed by the browser is lost, and the forward and backward buttons are unavailable.
  • 2.UI is not synchronized and DOM structure is not shared. It’s not easy to center a popup in a small iframe on the entire screen
  • 3. Global context is completely isolated, memory variables are not shared, and external global variables cannot be accessed inside iframe
  • 4. Slow. If you have used iframe before, you know that iframe loading is actually quite slow

For these problems, Qiankun can solve them perfectly.

Rapid construction of an Qiankun micro front-end application

With that said, let’s take a look at the steps needed to quickly build a Qiankun micro front-end application:

  • 1. Create a master application and at least one microapplication
  • 2. Then install the micro front-end library in the main application: Qiankun
  • 3. Import the registerMicroApps and Start methods in Qiankun at the entrance of the main application
  • 4. Call the registerMicroApps method to register each microapplication, and finally call the Start method to start qiankun

The above four steps are about the configuration of the main application. Is it easy? Let’s look at the configuration of the micro application.

  • 1. The micro application does not need to install Qiankun, but must export three methods at its entrance:
    • Bootstrap: called once (only once) when the microapplication is started (initialized)
    • Mount: The microapplication rendering function, called each time the microapplication comes in
    • Unmount: Called every time the microapplication is cut or unmounted
    • ** Note: ** all three methods must be exported even if they do nothing, otherwise an error will be reported
  • 2. In order to ensure that each micro-application can run independently, the global attribute Window.__ POWERED_BY_QIANKUN __ needs to be used at the entrance to determine whether the current application is started by the main application or run independently, so as to make corresponding logical processing
    • If it is run independently, no additional processing is required, just render according to the original logic
    • If it is started by the main application, assign the value of the global variable window. INJECTED_PUBLIC_PATH_BY_QIANKUN __ to the variable __ webpack_public_path __
  • 3. If the application is built by tools such as Webpack (such as Vue or React), some corresponding configurations need to be added for the webpack tool. Generally, library and libraryTarget of output need to be configured.
  • 4. Finally, because different applications will be deployed in different domains, there will definitely be a cross-domain problem, which is usually configured on the server side to allow cross-domain

Ok, the configuration of the microapplication is also a 4-step process, but it’s a little more complicated than the main application.

Core code of the qiankun master sub-application

Theory said a lot, light talk is useless, the following steps according to the implementation of a qiankun micro front end of the core code

  • Main application core code
	// 1. Take qiankun + Vue2.0 as an example to create a master application and a sub-application, and the routing mode is history mode
	vue create qiankun-main
	vue create qiankun-child1
	
	// 2. In the main application qiankun installed qiankunNPM install Qiankun --save// 3. Import the two methods registerMicroApps and Start in the portal (main.js)
	// main.js
	import {registerMicroApps, start} from 'qiankun'
	
	// 4. Call the registerMicroApps method to register the qiankun-child1 and call the start method to start the Qiankun.
	// main.js
	registerMicroApps([
		{
			name:'qiankun-child1'.// The name of the microapplication
			entry: '//localhost:8082'.// Micro application domain name (startup path)
			container: '#vueContainer'.
      

			activeRule:'/vueChild' // Route to the microapplication to be activated}]); start();/ / start qiankun
	/ /... Other logic
Copy the code
  • Microapplication core code
// main.js
// 1. Export the three required methods
export async function bootstrap(props){
	console.log('Only called once when microapplications are initialized')}export async function mount(props){
	console.log("Create vue instance and render")}export async function unmount(props){
	console.log("Uninstall the current Vue instance")}__POWERED_BY_QIANKUN__ Determine whether it was started independently or by qiankun
if(window.__POWERED_BY_QIANKUN__){
	__webpach_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
if(!window.__POWERED_BY_QIANKUN__){
	console.log("Create vue instance and render")}Copy the code
// vue.config.js
// 3. Webpack export configuration
module.export = {
	output: {
		library: "qiankun-child1".libraryTarget: "umd"}}// 4. Cross-domain Settings on the server in the development environment
module.export = {
	devServer: {
		port: 8082.// The port must be the same as that registered in the main application
		headers: {
			"Access-Control-Allow-Origin": "*"}}}// 5. Configure the micro-application route
const router = new VueRouter({
	mode:'history'.base: '/vueChild',
	routers
});
Copy the code

conclusion

In this paper, the concept and characteristics of qiankun were briefly introduced, and the configuration steps of the sub-application to achieve a micro-front-end based on Qiankun were sorted out. Finally, the core code of the sub-application configuration was given by taking qiankun+ Vue2.0 as an example. Interested partners can implement a simple micro front-end bar based on the description of operation steps and core code. This article is shared here first, if you have task questions and guidance, please comment and leave a message! The next article will build a simple but complete microfront-end project from scratch based on the core code described above.

Like small partners welcome to praise attention plus message oh!