In Chinese traditional culture
qianmeans heaven and
kunstands for earth, so
qiankunis the universe.
As we know what micro-frontends aims for:
An independent development experience is very important for a large system, especially with an enterprise application. But if you've tried to implement a micro-frontends architecture in such a system, you'll usually hurt your brain with such problems:
- How to compose your independent sub apps into your main system?
- How to guarantee your sub apps to be isolated by each other?
- and so on...
We built an library to help you solve these glitch problems automatically without any mental burden of yours, then named it
Probably the most complete micro-frontends solution you ever met🧐.
npm i qiankun -S
🔨 Getting Started
1. Create master framework with qiankun
2. Export the lifecycles from your sub app entry
For more lifecycle information, see single-spa lifecycles
3. Config your sub app bundler
While you wanna build a sub app to integrate to qiankun, pls make sure your bundler have the required configuration below:
output:library: `-[name]`libraryTarget: 'umd'jsonpFunction: `webpackJsonp_`
parcel serve entry.js --global myvariable
npm inpm run install:examplesnpm start
- Based on single-spa
- HTML Entry
- Config Entry
- Isolated styles
- JS Sandbox
- Assets Prefetch
- @umijs/plugin-qiankun integration
|prefetch||Whether to prefetch assets of sub apps after first sub app mounted||true|
|jsSandbox||While sandbox enabled, we could guarantee that sub apps is isolated with each others||true|
|singular||Only one sub app display at one runtime, that means a sub app will wait to mount until the before one unmounted||true|
|fetch||Set a cuntom fetch function||
Set which sub app shoule be active by default after master loaded.
- Parcel apps integration (multiple sub apps displayed at the same time, but only one uses router at most)
- Communication development kits between master and sub apps
- Custom side effects hijacker
- Nested Microfrontends
- single-spa What an awesome meta-framework for micro-fronteds!