背景

公司老的项目是用php开发的前后端不分离的项目。这个项目存在以下问题：

前后端不分离，前端需要拉取docker镜像和后端同学维护同一套代码，这是一种石器时代的开发方式。
前端同学有时候还需要掌握一些php的知识,里面是各种js技术的大杂烩，有人通过script方式引入vue,有人通过script引入react，还有jquery等各种大杂烩。
代码架构本身比较落后，又经过多年迭代，已经成为一个粪坑项目。一个页面两三千行代码也是常有的事，对于线上的代码的一点修改都会对原本的功能产生重大影响，而且开发人员很难确定影响点，代码异常混乱，没人愿意去维护。

为什么选择qiankun

老项目业务量庞大，如果新起一个项目把老项目废掉，没个一年半载重构不完，而且两个项目并行业务上不允许，可能出现新的功能还需要在新老项目同时开发两份的情况，所需的人力物力财力太大，根本不可行。
qiankun经过阿里的实践，技术已经趋近成熟，不会又太多的坑。
qiankun可以把子项目无痛接入老项目，可以在用户毫无感知的情况下完成重构。所需的工作量也是很小的。

网上使用qiankun的方式都是用一个webpack项目作为父项目，引入若干子项目。但根据我们项目的具体情况，把老的php项目作为父项目是最好的。这样一是工作量最小，二是风险点最小，三是用户体验最好。子项目直接使用了umi。

如图所示是qiankun官网父项目接入qiankun的方式: 但自己公司的项目更时候把老的项目作为父项目，因为老项目是php模板开发的前后端不分离的项目，没法采用这种安装qiankun。所以第一步是自己生成一个能通过script引入的qiankun的Api文件。生成步骤如下：

git clone https://github.com/umijs/qiankun.git
cd qiankun
yarn install
yarn examples:install
yarn build

dist文件夹下的index.umd.min.js就是咱们需要的qiankun接入文件。这个js引入到项目就可以了

作为父项目的老的php项目是mvc模式的项目，通过控制器更新试图view。

按照原本前后端不分离的开发模式，每次开发新的页面都需要让后端同学新建一个作为视图层的php模板或者html文件让前端在视图层开发功能。

重构后通过唯一一个html作为试图页面注册子应用，以后开发新页面所以的控制器都跳转到这唯一一个试图页面就行了。

window.qiankun.loadMicroApp({
    name:'reactApp',
    entry: "", // 微应用的入口,默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
    container:'#react'
});

在这个页面中使用loadMicroApp手动加载子应用,子应用使用hash路由,这样父应用便可以听过hash路由跳转到子应用的任何一个页面了。

如上图所示是父项目的路由，通过这个路由就会加载子应用的PersonalData页面。

子项目选择了umi前端应用框架,umi本身就对qiankun进行了封装，在父项目不是umi的情况下也可以正常接入。

2. 子应用配置(插件注册)

和umi官网的步骤一样，都非常简单。唯一需要注意的是需要自己声明生命周期，否则控制台会报错，不过也不会影响子应用的加载，就是不好看。

父项目使用loadMicroApp的props属性传递数据。

子项目使用umi官网介绍的方式接收就行了，在此不做赘述。

通过以上方式把公司老项目进行了重构。页面在用户看来完全就是一个项目，但是实际上是通过qiankun把umi开发的项目接入到了老项目里，对于用户完全是无感知的。