天璇快速上手
子应用
安装
shell
npm i merak-helpernpm i merak-helper需要根据打包器，安装vite-plugin-merak/webpack-plugin-merak
shell
npm i vite-plugin-merak -save-devnpm i vite-plugin-merak -save-dev如果不使用打包器，可使用脚手架
配置
以vite为例
ts
import { Merak } from 'vite-plugin-merak'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [Merak('sub1'/** 子应用专属的变量名 */,)],
})import { Merak } from 'vite-plugin-merak'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [Merak('sub1'/** 子应用专属的变量名 */,)],
})
fakeGlobalVar必须是一个合法的,未被占用的变量名,和umd中library name性质差不多
webpack见example
代码
以vue为例，
ts
// in main.ts
import { $onMount, $onUnmount } from 'merak-helper'
let app: AppType
function render() {
app = createApp(App)
app.mount('#app')
}
$onMount(render)// 挂载时执行
$onUnmount(() => app.unmount())// 卸载时执行// in main.ts
import { $onMount, $onUnmount } from 'merak-helper'
let app: AppType
function render() {
app = createApp(App)
app.mount('#app')
}
$onMount(render)// 挂载时执行
$onUnmount(() => app.unmount())// 卸载时执行就是暴露生命周期，没有什么特殊的
如果无法暴露生命周期，详见iframe模式
主应用
创建
Merak实例，必须先于html挂载 和无界差不多，使用了web component
在js中
ts
import { CompileLoader, Merak } from 'merak-core'
/** 设置加载器 */
const loader = new CompileLoader()
/** 设置子应用配置 */
const app = new Merak(name/** 子应用name */, url/** 子应用url */, { loader })import { CompileLoader, Merak } from 'merak-core'
/** 设置加载器 */
const loader = new CompileLoader()
/** 设置子应用配置 */
const app = new Merak(name/** 子应用name */, url/** 子应用url */, { loader })在html中
html
<merak-app :data-merak-id="name"></merak-app><merak-app :data-merak-id="name"></merak-app>vue详见
react详见