什么是微前端?

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
具体详情可直接看这里乾坤

本文主要是讲解如何搭建项目以及本人所使用的方法。

1. 首先要创建两个项目，可以直接放在一个文件夹下，也可以随便放。项目名称也可随便起。
  
  image.png
1. 创建两个react项目，我自己采用的是 Umi，qiankun插件可参考 plugin-qiankun

yarn create @umijs/umi-app  // 创建Umi项目
yarn add @umijs/plugin-qiankun --dev  // 下载qiankun插件
yarn // 加载依赖
yarn start // 启动项目

1. 分别在两个项目的package.json中增加name。

{
  "name":"your project name", 
}

1. 在主应用的.umirc.ts中添加qiankun配置。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
    // 4.1 注册子应用路由
    {
      name: 'app2',
      path: '/app2',
      microApp: 'app2',
    },
  ],
  // 4.2 注册qiankun应用
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app2', // 唯一 id
          entry: '//localhost:8002', // html entry
        },
      ],
      //   jsSandbox: true, // 是否启用 js 沙箱，默认为 false
      //   prefetch: true, // 是否启用 prefetch 特性，默认为 true
    },
  },
  fastRefresh: {},
});

1. 在子应用.umirc.ts中添加qiankun配置。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  // 5.1 插件注册
  qiankun: {
    slave: {}
  },
  fastRefresh: {},
});

1. 由于两个项目默认都是8000端口，可在.umirc.ts中添加devServer，分别配置不同的端口(例：主 8001，子 8002)

devServer:{
  port:8001
}

1. 动态注册子应用

// 7.1 删除原本在.umirc.ts或者config/config.js下的qiankun配置
export default defineConfig({
  ...
  qiankun: {
    master: {
      - apps: [
      -   {
      -     name: 'app2',
      -     entry: '//localhost:8002',
      -   }
      - ]
    }
  }
})

// 7.2 在mock文件夹下新增config.ts文件
export default {
  '/api/config': {
    apps: [
      {
        name: 'app2',
        entry: '//localhost:8002',
      },
    ],
  },
};

// 7.3 在 src 文件夹下新建 app.ts
// 从接口中获取子利用配置，export 出的 qiankun 变量是一个 promise
export const qiankun = fetch('/api/config')
  .then((res) => {
    return res.json();
  })
  .then(({ apps }) => {
    return Promise.resolve({
      // 注册子利用信息
      apps,
      // 残缺生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
      lifeCycles: {
        afterMount: (props) => {
          console.log(props);
        },
      },
      // 反对更多的其余配置，具体看这里 https://qiankun.umijs.org/zh/api/#start-opts
    });
  });

1. 在主应用中动态配置子应用的路由

// 8.1 在原本主应用的路由文件中删除写死的路由配置

// 8.2 在mock文件夹下的config.ts文件增加路由
export default {
  '/api/config': {
      ...
      routes: [
      {
        path: '/app2',
        name: '微应用首页',
        microApp: 'app2',
      },
    ],
  },
};

// 8.3 在src/app.ts中将路由返回出去
export const qiankun = fetch('/api/config')
  .then((res) => {
    return res.json();
  })
  .then(({ apps , routes}) => {
    return Promise.resolve({
      // 注册子利用信息
      apps,
     // 路由
      routes,
      // 残缺生命周期钩子请看 https://qiankun.umijs.org/zh/api/#registermicroapps-apps-lifecycles
      lifeCycles: {
        afterMount: (props) => {
          console.log(props);
        },
      },
      // 反对更多的其余配置，具体看这里 https://qiankun.umijs.org/zh/api/#start-opts
    });
  });