跳到主要内容

微前端

icestark 是飞冰团队针对大型系统提供的微前端解决方案,我们提供了独立插件 @ice/plugin-icestark 帮助 ice.js 应用快速接入微前端解决方案。

初始化应用

框架应用

通过模板快速创建一个微前端的框架应用(主应用):

$ npm init ice icestark-framework @icedesign/stark-layout
$ cd icestark-framework
$ npm install
$ npm start

微应用

通过模板快速创建一个微应用(子应用):

$ npm init ice icestark-child @icedesign/stark-child
$ cd icestark-child
$ npm install
$ npm start

应用改造

如果不是通过模板创建,则需要按照下面的步骤进行改造:

安装插件

$ npm i --save-dev @ice/plugin-icestark

框架应用改造

在应用配置文件中添加插件:

ice.config.mts

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
plugins: [
// 设置应用类型为框架应用 framework
icestark({ type: 'framework' }),
],
}));

应用入口配置微应用相关信息:

src/app.ts
import { defineFrameworkConfig } from '@ice/plugin-icestark/types';
import FrameworkLayout from '@/components/FrameworkLayout';

export const icestark = defineFrameworkConfig(() => ({
// 用于微应用全局的 Layout
layout: FrameworkLayout,
// 配置微应用信息,可为异步方法
getApps: () => ([
{
path: '/seller',
title: '商家平台',
loadScriptMode: 'import',
entry: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-ice-vite/index.html',
},
]),
// icestark 提供的 AppRouter 组件的配置参数
appRouter: {},
}));

微应用改造

在应用配置文件中添加插件:

ice.config.mts

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
plugins: [
// 设置应用类型为微应用 child
icestark({ type: 'child' }),
],
}));

但如果你的主应用是ice2,微应用是ice3,记得在ice3微应用的入口文件,通常是 app.tsx 文件中,调用 @ice/stark-app 中的 setLibraryName 方法,设置子应用模块的全局变量名称,通常是 package.json 中的 name

import {setLibraryName} from '@ice/stark-app';

setLibraryName('microName');

// ...其他app.tsx的代码,如export mount, export unmount等等

应用入口可以配置相关生命周期执行行为(可选):

ice.config.mts
import { defineChildConfig } from '@ice/plugin-icestark/types';

export const icestark = defineChildConfig(() => ({
mount: () => {
// 在微应用挂载前执行
},
unmount: () => {
// 在微应用卸载后执行
},
}));

附录

框架应用配置

getApp

  • 类型:Function
  • 默认值:() => []

用于获取微应用列表,单个微应用的完整配置字段请参考 AppConfig

layout

  • 类型:Component

框架应用对应的布局组件,必须渲染 children 用于渲染微前端相关应用结构:

export default function FrameworkLayout({ children }) {
return (
<>
<div>
{/* 必须渲染 layout 用来渲染微前端的结构 */}
{children}
</div>
</>
);
}

完成 layout 的开发后,配置在入口 src/app.ts 中:

src/app.ts
import { defineFrameworkConfig } from '@ice/plugin-icestark/types';
import FrameworkLayout from '@/components/FrameworkLayout';

export const icestark = defineFrameworkConfig(() => ({
layout: FrameworkLayout,
}));

appRouter

可传入 icestark 运行时的钩子函数和可选配置。主要有:

  • NotFoundComponent,匹配不到任何微应用路由时的状态。
  • LoadingComponent,加载过程中的 Loading 状态。
  • ErrorComponent,加载出现错误时的状态。

更多配置详见文档

微应用配置

mount

  • 类型:Function

在微应用挂载前,将执行该函数。

unmout

  • 类型:Function

在微应用卸载后,将执行该函数。