@saco/qiankun
v1.0.0-beta.9
Published
An integrated encapsulation based on qiankun@2
Downloads
51
Maintainers
Readme
🤔 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 qiankun, { mount, listenMsg, sendMsg, unmount } from '@saco/qiankun'
That is, the method of deconstruction is also present in the complete export,For example qiankun.mount === mount
✨ Function Description
① mount
: Application Mount
unmount(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
name
: Application Nameentry
:Application AddressactiveRule
:Activation Path - If it does not exist, it will be automatically generated based on the 'name'.container
:The DOM element name for application mounting, it will be automatically generated based on the 'name'.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. )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. )...
:You can also add other items to pass to the child application.
② listenMsg
: Message Receiver
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
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 thecallBack
oflistenMsg
).
④ unmount
: Application Uninstallation
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
main.ts
import { mount } from '@saco/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
main.ts
import qiankunWebpack from '@saco/qiankun/webpack'
import type { QiankunProps } from '@saco/qiankun'
type MyMicroProps = QiankunProps<{
token: string
}, {
closeTab: Function
}, {
components: any[]
}>
// Child Application Loading Logic
const render = (props?: MyMicroProps) => {
// ...
}
export async function bootstrap(){}
export async function mount(props: MyMicroProps){
render(props)
}
export async function unmount() {}
qiankunWebpack(render) // Application Autostart when not using Micro-Frontends
webpack.config.js
const { name } = require('./package.json')
const qiankunWebpack = require('@saco/qiankun/webpack.plugin')
module.exports = qiankunWebpack({ // plugin-config
name,
type: 'webpack', // or vue-cli
}, { // webpack-config
// ...
})
- ⚡ vite-app
main.ts
import qiankunVite from '@saco/qiankun/vite'
import type { QiankunProps } from '@saco/qiankun'
type MyMicroProps = QiankunProps<{
token: string
}, {
closeTab: Function
}, {
components: any[]
}>
// Child Application Loading Logic
const render = (props?: MyMicroProps) => {
// ...
}
qiankunVite({
mount: (props: MyMicroProps) => {
render(props)
},
bootstrap: () => {},
update: (props: MyMicroProps) => {},
unmount: (props: MyMicroProps) => {},
single: () => { // Application Autostart when not using Micro-Frontends
render({} as MyMicroProps)
}
})
vite.config.ts
import { name } from './package.json'
import qiankunVite from '@saco/qiankun/vite.plugin'
// The `qiankunVite` function has encapsulated `defineConfig`, and you can pass it as the second parameter.
export default qiankunVite({ // plugin-config
name,
useDevMode: true,
port: 8000 // The port is set by yourself, and the current one is just for demonstration,
// When you pass this item, it will override the port in the vite-config's server.
}, { // vite-config
// ...
})
// Certainly, you can also use functional configuration.
export default qiankunVite({ // plugin-config
name,
useDevMode: true,
port: 8000
}, (options) => { // vite-config
console.log('----', options)
return options
})
💪 Compatibility
Browser Support Status:Modern Browsers
If you indeed need to support outdated browsers such as IE11 and below, you can follow the guidelines below to add polyfills to your project:The following steps are aimed at the host application
!
Install the corresponding dependencies.
$ npm i custom-event-polyfill whatwg-fetch -S
Import in the entry file.
import 'whatwg-fetch'
import 'custom-event-polyfill'