@ugdu/runtime
v2.0.1
Published
A runtime lib for micro frontends.
Downloads
13
Readme
A runtime lib for micro frontends.
Overview
This runtime lib provide a ur global variable which has some helpful methods like register, load, unload and start.
For features, check features.
For a simple example, check usage.
The phrases like app are terms. Their brief explanation is here.
For more detail, check our API docs.
Features
- Independent deployment.
- All
modules can be deployed independently.
- All
- Multiple frameworks in one project.
- Different
apps can be based on different frameworks. This means that you can upgrade or refactor your project incrementally. For example, develop new feature with vue3 and the other code remain vue2.
- Different
- Style security.
- To avoid FOUC, the
modulewill only be evaluated after the css it required is loaded. - The css of the
apps which should be unload will be removed from the document.
- To avoid FOUC, the
- Lazy load.
- Only the
modules which are used by the activeapps will be loaded.
- Only the
- Preload assets
- When load a
module, allmodules thismoduleimports will be preload.
- When load a
Usage
Include @ugdu/runtime with a async attribute on the script, then include an importmap and module scripts normally.
Below is an example for a project that which registers two app, one based on vue2 and the other based on vue2.
Tips: When using our build tool @ugdu/packer, the importmap and the startup script will be generated according to your source code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ugdu</title>
<script async src="https://unpkg.com/@ugdu/runtime/dist/index.js"></script>
<script type="importmap-shim">
{
"imports": {
"@v2/container": "/assets/@v2/container/index.js",
"@v2/purchase/src/pages/list.vue": "/assets/@v2/purchase/list.js",
"@v3/container": "/assets/@v3/container/index.js",
"@v3/sale/src/pages/list.vue": "/assets/@v2/sale/list.js",
},
"scopes": {
"/assets/@v2/container": {
"vue": "/assets/[email protected]/index.js"
},
"/assets/@v2/purchase": {
"vue": "/assets/[email protected]/index.js"
},
"/assets/@v3/container": {
"vue": "/assets/[email protected]/index.js"
},
"/assets/@v3/sale": {
"vue": "/assets/[email protected]/index.js"
}
}
}
</script>
<script type="module-shim">
ur.register('@v2/container', pathname => pathname.startsWith('/v2'), () => ur.load('@v2/container'))
ur.register('@v3/container', pathname => pathname === '/' || pathname.startsWith('/v3'), () => ur.load('@v3/container'))
const base = '/'
const rms = [
{
id: '@v2/container',
js: 'assets/@v2/container/index.js',
css: 'assets/@v2/container/index.css',
imports: ['[email protected]']
},
{
id: '@v2/purchase/src/pages/list.vue',
js: 'assets/@v2/purchase/list.js',
css: 'assets/@v2/purchase/list.css',
imports: ['[email protected]']
},
{
id: '@v3/container',
js: 'assets/@v3/container/index.js',
css: 'assets/@v3/container/index.css',
imports: ['[email protected]']
},
{
id: '@v3/sale/src/pages/list.vue',
js: 'assets/@v3/sale/list.js',
css: 'assets/@v3/sale/list.css',
imports: ['[email protected]']
},
{
id: '[email protected]',
js: 'assets/[email protected]/index.js',
imports: []
},
{
id: '[email protected]',
js: 'assets/[email protected]/index.js',
imports: []
}
]
ur.start(rms, base)
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>Terms
appTheappcan actually be thought of as the entrypackage. We can register multipleappin one project. And thoseappcould based on different framework.moduleThe jsmodule. Themodulemay import othermodules or css.