@saco/qiankun v2.0.11

🤔 Motivation

In the micro frontend framework, each project built from scratch, such as the main application, requires packaging or copying the previously packaged code every time, resulting in repetitive tasks for each project setup. Therefore, there is a need for a dependency library that can quickly set up a project and encapsulate the code for both the main and sub-applications, allowing developers to focus solely on the business logic.

📦 Install

$ npm install @saco/qiankun -S

📖 Documentation

The current library provides the following functions：

import sacoQiankun from '@saco/qiankun'
const qiankun = new qiankun(sacoQiankun)

options：The plugin is used for specific configuration options of instantiation. You can provide the following information for the configuration options as needed. 1. addGlobalUncaughtErrorHandler: Global uncaught exception handler. 2. setDefaultMountApp: The default micro-app that the main application enters after startup.

✨ Function Description

① mount： Application Mount

qiankun.mount(options)

options：The application mount function is used to activate an application with specific configuration options. You need to provide the following information for the configuration options 1. name: Application Name 2. entry：Application Address 3. activeRule：Activation Path - If it does not exist, it will be automatically generated based on the 'name'. 4. container：The DOM element name for application mounting, it will be automatically generated based on the 'name'. 5. store：Status Repository - This method is a function that takes 'name' as a parameter (Explanation: In order to obtain the latest status upon each reactivation, rather than old status values, and also to distinguish between different applications by passing different states). --- (Certainly, you can also pass an object directly. However, if you are considering real-time functionality, it is not recommended. ) 6. actions：Message Repository - This method is a function that takes 'name' as a parameter (Explanation: In order to distinguish between different applications and set different operations for each). --- (Certainly, you can also pass an object directly. However, if you are considering real-time functionality, it is not recommended. ) 7. ...：You can also add other items to pass to the child application.

② listenMsg： Message Receiver

qiankun.listenMsg(appName, callBack)

appName：is the name of the application that sends messages to the current application, corresponding to the 'name' configuration option passed in during the 'mount' operation

callBack: The callback function to be executed when a message is received. The function will take one parameter, which is the content of the received message

③ sendMsg： Message Sender

qiankun.sendMsg(appName, data)

appName：The name of the application to which you need to send messages, corresponding to the 'name' configuration option passed during the 'mount' operation.

data: Message content (i.e., the parameter in the callBack of listenMsg).

④ unmount： Application Uninstallation

qiankun.unmount(appName)

appName：It refers to the name of the application that needs to be uninstalled, corresponding to the 'name' configuration option passed during the mount operation. Note: This function can be an array.

✨ Application Access Case（TypeScript）

• ⚡ base-app If you need to run on a lower version browser, click here to view the configuration.

main.js/ts

qiankun.mount({
  name: 'vue2',
  entry: '//localhost:7002',
  container: '#vue2',
  activeRule: '/vue2',
  store: {
    token: '123456789'
  },
  actions: (name) => {
    return {
      closeTab: () => {
        console.log('name', name)
      }
    }
  },
  loading: (type, flag, err) => {

  },
  // Custom Content
  components: `custom option to vue2`,
})

• ⚡ webpack-app click here to view the configuration. If using typescript, please refer to the following statement

import type { QiankunProps } from '@saco/qiankun'
type MyMicroProps = QiankunProps<{
  token: string
}, {
  closeTab: Function
}, {
  components: any[]
}>

• ⚡ vite-app Recommend using the vite-plugin-qiankun plugin for Vite applications. It should be noted that when the sub application cannot access the resources, please add the following code in the Vite configuration. If you need to use a local area network, you can search for how to use Node.js to obtain an IP address Type declaration refers to the webpack section.

vite.config.js/ts

{
  server: {
    headers: {
      ['Access-Control-Allow-Origin']: '*'
    },
    origin: `http://localhost:${port}`
  }
}

It is recommended to replace localhost with the following methods:

import os from 'node:os'
const interfaces = os.networkInterfaces()
let ipAdr
for (const interface in interfaces) {
  for (const config of interfaces[interface]) {
    if (config.family === 'IPv4' && !config.internal) {
      ipAdr = config.address
    }
  }
}