应用 umi 3 创立子利用并接入主利用

前言：
umi 3 更新频繁，文档不欠缺，时效性不定，因而前提条件很重要，明天是 2020 年 8 月 21 日。

创立子利用应用的脚手架是：umi 3
创立主利用应用的脚手架是：um 2，然而本篇文章临时不介绍创立主利用的过程及在主利用中的配置过程。

1. 创立 umi 3 工程

命令行

yarn create @umijs/umi-app

2. 装置 umi 3 的 qiankun 插件

创立的 umi 3 并不蕴含 qiankun 插件，须要本人装置。

yarn add @umijs/plugin-qiankun -D

3. 增加 package.json 的 name

在 package.json 中增加属性 name，name 值为你的我的项目名，请自定义。

4. 在子利用中配置

参考：https://umijs.org/zh-CN/plugins/plugin-qiankun# 第一步：插件注册（configjs）

4.1 插件注册

对于 umi 3，须要在子利用的配置（.umirc.ts）中，增加上面这部分代码：

qiankun: {slave: {}
}

增加后成果如下：

4.2 配置运行时生命周期钩子（可选）

如果须要在子利用的生命周期期间加一些自定义逻辑，能够在子利用的 src/app.ts 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主利用主动注入。

须要留神的是，在由 umi 3 脚手架创立的工程中，src 目录下并没有 app.ts 文件，这须要本人创立，并将如下代码 copy and paste。

export const qiankun = {
  // 利用加载之前
  async bootstrap(props) {console.log('app1 bootstrap', props);
  },
  // 利用 render 之前触发
  async mount(props) {console.log('app1 mount', props);
  },
  // 利用卸载之后触发
  async unmount(props) {console.log('app1 unmount', props);
  },
};

至此，这一阶段的工作曾经实现，尽管如果没有对 umi 的整体理解上来看本篇文章会云里雾里，但还是心愿能给在此局部有所困惑而停滞的同学提供帮忙。