微前端 icestark《理论篇》

微前端 icestark

区分主应用和微应用，微前端把多个微应用接入到主应用里

场景：

• 后台比较分散，体验差别大，因为要频繁跳转导致操作效率低，希望能统一收口的一个系统内
• 单页面应用非常庞大，多人协作成本高，开发/构建时间长，依赖升级回归成本高
• 系统有二方/三方接入的需求

在保证一个系统的操作体验基础上，实现各个微应用的独立开发和发版，主应用通过 icestark 管理微应用的注册和渲染，将整个系统彻底解耦。

框架应用#

通过模板快速创建一个微前端的框架应用：

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

如果不是通过模板创建，添加插件 build-plugin-icestark

npm i --save-dev build-plugin-icestark

应用入口 src/app.ts 中配置框架应用的一些运行时信息：

import { runApp } from 'ice'
+import { ConfigProvider } from '@alifd/next';
+import NotFound from '@/components/NotFound';
+import BasicLayout from '@/layouts/BasicLayout';
const appConfig = {
  app: {
    rootId: 'ice-container',
+    addProvider: ({ children }) => (
+      <ConfigProvider prefix="next-icestark-">{children}</ConfigProvider>
+    ),
  },
  router: {
+    type: 'browser',
  },
  icestark: {
+    type: 'framework',
+    Layout: BasicLayout,
+    getApps: async () => {
+      const apps = [{
+        path: '/seller',
+        title: '商家平台',
+        url: [
+          '//ice.alicdn.com/icestark/child-seller-react/index.js',
+          '//ice.alicdn.com/icestark/child-seller-react/index.css',
+        ],
+      }];
+      return apps;
+    },
+    appRouter: {
+      NotFoundComponent: NotFound,
+    },
  },
};

runApp(appConfig);

appConfig.icestark 完整的配置项说明：

• type: string, framework|child
• Layout: Component, 系统对应的布局组件
• getApps: function，获取所有微应用数据，单个微应用的完整配置字段请参考 icestark 文档
• appRouter:
  • NotFoundComponent: 404 组件
  • LoadingComponent: 应用切换时的 Loading 组件

LoadingComponent例子：

import { Loading } from '@alifd/next';

export default () => (
  <div style={{ paddingTop: 200, textAlign: 'center' }}>
    <Loading color="#fff" />
  </div>
);

微应用#

通过模板快速创建一个微应用：

# 创建微应用
$ npm init ice icestark-child @icedesign/stark-child-scaffold
$ cd icestark-child
$ npm install
$ npm start

如果不是通过模板创建，添加插件 build-plugin-icestark

npm i --save-dev build-plugin-icestark

在 build.json 里引入插件：

{
  "plugins": {
    ["build-plugin-icestark", {
      "umd": true
    }]
  }
}

应用入口改造#

在应用入口 src/app.ts 中配置微应用相关的信息：

import { runApp } from 'ice'

const appConfig = {
  app: {
    rootId: 'ice-container',
  },
  router: {
+    type: 'browser',
  },
  icestark: {
+    type: 'child',
  },
};

runApp(appConfig)

只需要这么简单，你的 SPA 应用就可以变成微应用了。

官方模板配置的icestark：

appConfig里：

icestark: {
type: 'framework',
Layout: FrameworkLayout,
getApps: async () => {
  const apps = [{
    path: '/seller',
    title: '商家平台',
    sandbox: true,
    // React app demo: https://github.com/alibaba-fusion/materials/tree/master/scaffolds/ice-stark-child
    url: [
      'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-react/build/js/index.js',
      'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-react/build/css/index.css',
    ],
  }, {
    path: '/waiter',
    title: '小二平台',
    sandbox: true,
    url: [
      // Vue app demo: https://github.com/ice-lab/vue-materials/tree/master/scaffolds/icestark-child-app
      'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/js/app.js',
      'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/css/app.css',
    ],
  }, {
    path: '/angular',
    title: 'Angular',
    sandbox: true,
    // Angular app demo: https://github.com/ice-lab/icestark-child-apps/tree/master/child-common-angular
    entry: 'https://github.com/ice-lab/icestark-child-apps/tree/master/child-common-angular',
  }];
  return apps;
},
appRouter: {
  LoadingComponent: PageLoading,
},
},

常见问题#

如何监听微应用切换#

icestark 通过 onRouteChange、onAppEnter 和 onAppLeave 来监听微应用间的切换，在 icejs 研发框架下可以通过在对应的 Layout 中实现相关钩子的监听。Layout 中接收 props 属性如下：

• pathname：微应用路由切换信息，对应 onRouteChange
• appEnter：渲染微应用的信息， onAppEnter
• appLeave：卸载微应用的信息，对应 onAppLeave

在 Layout 使用相关属性时，结合对应属性是否发生变更来执行相应操作：

const BasicLayout = ({ pathname, appLeave, appEnter, children }) => {
  useEffect(() => {
    console.log(`微应用路由发生变化：${pathname}`);
  }, [pathname]);

  useEffect(() => {
    console.log(`卸载微应用：${appLeave.path}`);
  }, [appLeave]);

  useEffect(() => {
    console.log(`渲染微应用：${appEnter.path}`);
  }, [appEnter]);

  return (
    <div>
      {children}
    </div>
  );
};

下面两个可能用不上，需要的时候再到官网学习

动态修改微应用列表#

UMD 规范微应用#