@jsbest/async-app

Async-App 微前端加载器

介绍

async-app 是一个基于 react component 的 remote component 加载器，支持 webpack 打包 umd 或 var 格式。

简单使用

import React, { Component } from 'react';
import AsyncApp from '@ali/async-app';
export class App extends Component {
  render() {
    return (
      <div>
        <AsyncApp
          appName={'app'}
          componentName={'App'}
          includeOriginCss={false}
          entry={'https://gw.alipayobjects.com/os/acdn/m335cp/index.js'}
        />
      </div>
    );
  }
}

参数解释

参数	渲染元素容器样式	类型	默认值
style	CSSProperties	CSSProperties
className	渲染元素容器 className	string
entry	组件 CDN 资源或 React Component	string | ReactNode
includeOriginCss	是否自动加载 entry 同名的样式文件，如 entry 为：https://g.alicdn.com/group/project/0.0.1/app.js ，则会自动添加其同名的样式文件https://g.alicdn.com/group/project/0.0.1/app.css	boolean	true
appName	挂载到 window 上的 react 组件名	string
componentName	实际需要渲染的组件，若为空则渲染 appName，例如 entry 组件挂载入境为 window.appname={someComponent:{subComponent:()=>{}}}，若需要渲染 subComponent，则需要配置此字段 componentName='someComponent.subComponent'	string
loading	自定义 loading 组件，可设置为 null 关闭 loading	ReactNode
errorComponent	错误时渲染组件可设置为 nul 关闭	ReactNode	AsyncApp Error
mode	加载器渲染方案	'isolate'、'iframe'、'global'	'isolate'
shadowDom	是否开启shadowDom模式进行渲染，默认true
beforeRender	组件渲染前回调，可定制渲染组件，第一个参数为待渲染的组件，第二个为当前沙箱挂载的 app 实例	(component,app)=>component
params	需要传递到组件的 props	object
dependencies	依赖资源 cdn 地址	string[]

example

1. antdv3 和 antdv4 混用

2. simple-demo