umi.js项目接入乾坤微前端

踩坑总结： 1.情景：写的某个系统需要接入qiankun搭建的主应用中，在接入过程中发现umi文档有关接入这一块文档比较简洁。在接入后需要根据不同环境进行判断，做兼容。

2.首先请查看自己的umi版本，很重要！！！这里我的版本为，不同版本需要安装不同版本的qiankun插件。这里根据我的版本安装的qiankun版本为，建议在umi.js官方文档上看自己版本适配的qiankun版本。

qiankun官方文档：qiankun.umijs.org/zh；选择项目实践，看自己项目的技术栈根据文档配置即可，umi.js的qiankun配置这里我们主要看umi官网umijs.org/zh-CN/plugi…

按照官方文档所说首先安装umi.js的qiankun插件，注意按照自己umi版本安装对的qiankun插件

npm i @umijs/plugin-qiankun -S

在一块中最重要便是插件插件注册：

第一个天坑出现了，这里我们可以根据自己项目目录进行注册：

项目配置的是config.js所以我在config.js中对插件进行注册，umi.js插件注册写法为，如果你的配置写在.umirc.js，插件注册都是一样的。

plugins: [
    [
      'umi-plugin-react',
      {
        antd: true, //启用后自动配置 babel-plugin-import，实现antd按需加载
        locale: { enable: true },
        dva: {
          dynamicImport: true, //是否启用按需加载  //111
          hmr: true, //是否启用 dva 的 热更新
        },
        routes: {
          exclude: [
            //111
            /components\//,
            /model\.(j|t)sx?$/,
            /components\.(j|t)sx?$/,
            /service\.(j|t)sx?$/,
            /models\//,
            /services\//,
          ],
        },
      },
    ],
    [
      '@umijs/plugin-qiankun',//qiankun插件注册
       {
         slave: {},
       }
    ],
  ],

注意：这里官网给的代码

export default {
  qiankun: {
    slave: {},
  },
};

需要根据自己umi的版本，写不同的插件id，比如说：Umi 2 的 qiankun 插件是 umi-plugin-qiankun，插件注册的代码为：

[
      'umi-plugin-qiankun',//qiankun插件注册
       {
         slave: {},
       }
],

插件注册完基本工作就完成了，其他工作插件会帮我们完成，打包前需要我们看一下我们的package.json，是否有项目名：name:'xxx';没有就加上，name是子应用唯一 id，是必要的配置。 在webpack中配置模块导出

module.exports = {
  output: {
    library: 'xxx',
    libraryTarget: 'umd',
    jsonpFunction: 'xxx',
  },
};

然后对项目进行打包操作，不需要进行分包，这里以我的为例

这里需要注意看js包里面有没有qiankun：

，

注意选择有qiankun的脚本做子应用 html 地址，即入口文件，一般默认最后一个脚本文件为入口文件，如果你的脚本不是在最后位置，可以使用entry使该脚本成为入口文件：

剩下的就是找乾坤基座负责人把你项目接进去，把你的页面路由发给他，他进行配置就ok了。