@ice/stark
@ice/stark
包含主应用运行的核心逻辑,只需在主应用中使用。
可以按照下面的方式导入这些函数:
对于使用非 React 的用户,我们建议您直接从 lib
目录下导入这些方法。
#
AppConfigAppConfig
定义一个微应用的结构,使用方式如下:
AppConfig
类型定义如下:
各字段详细介绍如下:
#
name微应用唯一标识(必填):
- 类型:
string
- 默认值:无
#
title页面标题(选填):
- 类型:
sting
- 默认值:无
#
activePath微应用激活规则,其类型定义如下:
activePath
可以配置成以下的形式:
#
container微应用挂载 DOM 节点
- 类型:
HTMLElement
- 默认值:
-
#
url微应用静态资源对应的 cdn 地址,当渲染微应用时,会将此 url
内的 js、css 资源加载进来(必填)。
- 类型:
string | string[]
- 默认值:
-
#
entry微应用对应的 html 入口,当渲染微应用时,会通过 window.fetch
将 html 内容获取过来,然后 append
至动态创建的节点(选填)。
- 类型:
string
- 默认值:
-
#
entryContent直接配置微应用的 html 内容。当渲染微应用时,会 append
至动态创建的节点(选填)。
- 类型:
string
- 默认值:
-
一般应用于需要用 html 入口但不支持跨域获取资源的场景
@depreated#
umd @depreated,请使用
loadScriptMode
。
标识微应用是否是一个标准的 UMD 微应用
- 类型:
boolean
- 默认值:
false
#
exact完全匹配,参考 Route.exact(选填)。
- 类型:
boolean
- 默认值:
false
#
strict严格匹配,参考 Route.strict(选填)。
- 类型:
boolean
- 默认值:
false
#
sensitive区分大小写,参考 Route.strict(选填)。
- 类型:
boolean
- 默认值:
false
#
hashType微应用路由以 hash
路由的方式接入(选填)。
- 类型:
boolean
- 默认值:
false
#
sandbox微应用开启沙箱运行环境(选填)。
- 类型:
boolean | Sandbox
- 默认值:
false
2.0.0+#
props 自定义属性,会传递给微应用的 mount 方法
- 类型:
object
- 默认值:
{}
#
cached是否开启微应用切换时缓存(选填)。详细用法见 性能优化
- 类型:
boolean
- 默认值:
false
2.0.0+#
loadScriptMode 微应用 JavaScript 资源加载方式。当值 fetch
时,会通过 window.fetch
(若AppRouter 提供了 fetch
参数,则会使用自定义 fetch
) 请求资源;值为 script
,会使用 <script />
标签加载资源;值为 import
,则支持 es module 类型微应用。选填。
- 类型:
fetch | script | import
- 默认值:
script
2.4.0+#
scriptAttributes 当 loadScriptMode
为 script
时,为 <script />
添加的自定义 attributes。比如,您想为 <script />
标签添加 crossorigin="anonymous"
来解决 Script error
问题,可以这样设置:
#
StartConfigurationStartConfiguration
定义 icestark 运行时可选的参数配置,包含一些常见的 Hooks 以及自定义配置。类型定义如下:
各字段详细介绍如下:
#
onActiveApps微应用开始被激活的回调(选填)
- 类型:
Function(appConfig[])
- 默认值:
-
#
onAppEnter微应用渲染前的回调(选填)
- 类型:
Function(appConfig)
- 默认值:
-
#
onAppLeave微应用卸载前的回调(选填)
- 类型:
Function(appConfig)
- 默认值:
-
#
onLoadingApp微应用开始加载的回调(选填)
- 类型:
Function(appConfig)
- 默认值:
-
#
onFinishLoading微应用结束加载的回调(选填)
- 类型:
Function(appConfig)
- 默认值:
-
#
onError微应用加载过程发生错误的回调(选填)
- 类型:
Function(error)
- 默认值:
-
#
shouldAssetsRemove判断页面资源是否持久化保留(选填)
- 类型:
Function(assetUrl, element)
- 默认值:
() => true
#
fetch自定义 fetch(选填)。
- 类型:
Function(assetUrl)
- 默认值:
window.fetch
#
prefetch预加载微应用资源(选填)。
- 类型:
Boolean | string[] | Function(app)
- 默认值:
undefined
2.5.0+#
basename - 微应用路由匹配统一添加 basename,选填
- 类型:
string
- 默认值:
''
#
React 组件对于 React 用户,我们封装了底层 API 的部分能力,以便用户可以通过 React 组件的方式快速接入 icestark。了解更多请移步 主应用接入 - React。
以下 api 均从 @ice/stark
导出。
#
AppRouter定位微应用渲染节点,其 props 参数扩展至 StartConfiguration。类型定义如下:
新增字段介绍如下:
#
ErrorComponent传入一个 React Component,在微应用加载过程中出现错误时渲染(可选)。
- 类型:
React.ComponentType | React.ReactElement
- 默认值:
-
#
LoadingComponent传入一个 React Component,在微应用加载过程中时渲染(可选)。
- 类型:
React.ComponentType | React.ReactElement
- 默认值:
-
#
NotFoundComponent传入一个 React Component,在无匹配路由时渲染(可选)。
- 类型:
React.ComponentType | React.ReactElement
- 默认值:
-
#
AppRoute微应用注册组件,组件 Props
的类型定义如下:
info
在使用 <AppRoute />
渲染微应用是,无需再提供 container
参数。一个最简的例子如下:
除 AppConfig 所定义的参数之外,<AppRoute>
还支持以下属性:
#
component当路由匹配是直接渲染 react component,渲染后会带上 location
、match
、history
的 props
, 支持 AppRoute
替代 react-route
的基本能力。当配置此属性时,url
等配置会失效。参考 Route.component,选填
- 类型:
string | ReactNode
- 默认值:
-
#
render支持 AppRoute
替代 react-route
的基本能力。当配置此属性时,url
等配置会失效。参考 Route.render,选填
- 类型:
({location, match, history}) => ReactNode
- 默认值:
-
@depreated#
path 该字段已处于 @depreated
,在未来的版本中,该字段可能会被移除。 请使用 activePath。
#
核心 APIicestark 底层能力已完全与框架解耦。这些能力使得您可以使用 api 的方式 接入 icestark。其中包含的 API 有:
2.0.0+#
registerMicroApps 用于注册微应用信息,registerMicroApps(appConfigs: AppConfig[])
。
2.0.0+#
removeMicroApps 移除已注册微应用信息,removeMicroApps(appNames: string[])
入参为已注册的 appNames 的信息。
#
start通过 start
开始劫持路由变化,触发微应用的挂载/卸载。类型定义如下:
入参为 StartConfiguration。示例如下:
2.0.0+#
createMicroApp 手动加载微应用,类型定义如下:
使用该 api 的通用场景是无需 icestark 提供的运行时能力,手动指定在某行为下触发渲染微应用。示例如下:
2.0.0+#
unmountMicroApp 手动卸载微应用,unmountMicroApp(appName)
2.0.0+#
unloadMicroApp 手动移除微应用,unloadMicroApp(appName)
同 unmountMicroApp 区别:unmountMicroApp 仅仅执行了微应用的 unmount 方法,从节点上移除微应用,下一次挂载时可以直接执行 mount 重新挂载;而 unloadMicroApp 除了执行 unmount 方法之外,还会将微应用执行结果(mount/unmount)移除,下一次挂载该微应用时,需要重新加载资源执行来获取其生命周期。