接入微前端

基于 icejs 的插件机制，我们封装了 build-plugin-icestark 插件，这个插件可以大大降低接入微前端方案的成本。

框架应用

通过物料模板快速创建一个微前端的子应用：

  1. $ npm init ice icestark-framework @icedesign/stark-layout-scaffold
  2. $ cd icestark-framework
  3. $ npm install
  4. $ npm start

该模板默认在 build.json 里引入了插件 build-plugin-icestark：

  1. {
  2.   "plugins": {
  3.     "build-plugin-icestark"
  4.   }
  5. }

同时我们需要在应用入口 src/app.ts 中配置框架应用的一些运行时信息：

  1. import { createApp } from 'ice'
  2. +import NotFound from '@/components/NotFound';
  3. +import BasicLayout from '@/layouts/BasicLayout';
  5. const appConfig = {
  6.   app: {
  7.     rootId: 'ice-container',
  8.   },
  9.   router: {
  10. +    type: 'browser',
  11.   },
  12.   icestark: {
  13. +    type: 'framework',
  14. +    Layout: BasicLayout,
  15. +    getApps: async () => {
  16. +      const apps = [{
  17. +        path: '/seller',
  18. +        # '商家平台',
  19. +        url: [
  20. +          '//ice.alicdn.com/icestark/child-seller-react/index.js',
  21. +          '//ice.alicdn.com/icestark/child-seller-react/index.css',
  22. +        ],
  23. +      }];
  24. +      return apps;
  25. +    },
  26. +    appRouter: {
  27. +      NotFoundComponent: NotFound,
  28. +    },
  29.   },
  30. };
  32. createApp(appConfig)

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

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

子应用

通过物料模板快速创建一个微前端的子应用：

  1. # 创建子应用
  2. $ npm init ice icestark-child @icedesign/stark-child-scaffold
  3. $ cd icestark-child
  4. $ npm install
  5. $ npm start

同框架应用一样，子应用也会默认引入插件 build-plugin-icestark，同时在应用入口 src/app.ts 中配置了子应用相关的信息：

  1. import { createApp } from 'ice'
  3. const appConfig = {
  4.   app: {
  5.     rootId: 'ice-container',
  6.   },
  7.   router: {
  8. +    type: 'browser',
  9.   },
  10.   icestark: {
  11. +    type: 'child',
  12.   },
  13. };
  15. createApp(appConfig)

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

关于微前端的更多内容，请查看文档 icestark。