@ark-plan/ark v1.0.4

ark (方舟)

一个轻量版的微前端方案。

本地示例

1. git clone https://github.com/sadrun/ark.git
2. cd ark/packages/ark && npm start
3. 也可自行进入 packages/ark/example 执行：yarn && yarn start

📦 安装

• yarn: yarn add @ark-plan/ark
• npm: npm install @ark-plan/ark --save

🔨 使用方式

1. 使用ark 创建 主框架

import { registerMicroApps } from '@ark-plan/ark';

function render({ template, loading, name}) {
  const container = document.getElementById('frameWork');
  ReactDOM.render(<Framework loading={loading} content={template} name={name}/>, container);
}

render({ loading: true });

registerMicroApps(
  [
    { name: 'home', entry: '/home.html', render, activeRule:'/fe/home',isPreload:true, },
    { name: 'mall', entry: '/mall.html', render, activeRule:'/fe/mall',isPreload:false,  },
    { name: 'point', entry: '/point.html', render, activeRule:'/fe/point',isPreload:false,  },
  ],
  {
    index:'/fe/home'
  }
);

2. 应用结构，可不做任何调整，也可以按照如下规范：

   export async function willMount() {
     console.log('即将装载页面');
   }
   
   export async function mount() {
     ReactDOM.render(<App/>, document.getElementById('app'));
   }
   
   export async function unMount() {
     ReactDOM.unmountComponentAtNode(document.getElementById('app'));
   }

📖 API

type ActiveRule = string|RegExp|((location:any) => boolean);

interface ICustomConfig {
    index?:string,
    [key:string]:any,
}

interface IApp {
    name:string,
    entry:string | { styles?: string[], scripts?: string[], html?: string },
    render:(props:{ template:string, loading:boolean, name?:string})=> any,
    activeRule:ActiveRule,
    isPreload?:boolean,
}

function registerMicroApps(apps: IApp[], config: ICustomConfig): void;