现在有多个spa的项目，有angular的，有vue的和react的，如何将他们合并成一个大统一的spa项目

[airuikun]

很多公司，都有很多的老项目，并且都是不同框架，很分散，很多上级的上级，很喜欢提这种多项目统一的需求。

这时候你就会面临不同框架的项目重构。

如果你遇到这些问题，打算重写项目，那是非常费力不讨好的。这些问题，其实是能框架层面上去解决的。

我提供个思路，比如在angular项目里融合react项目，可以从ReactDOM.render结合angular的路由入手。

再提供个思路，例如简单的vue和react项目，可以用ast等手法，将代码互转。但这个我曾经实践过，会面临很多的bad case。

剩下的一些思路，欢迎大家挑战。

[resourceF]

single spa

[marsprince]

1.完全不动老代码的情况，考虑利用ast，通过babel硬转，这种方法目测问题很多 2.利用mobx，状态和逻辑通用，将三大框架降级为纯渲染框架，后期考虑实现模板互转（我正在尝试的）

[marsprince]

工程上的： 项目管理：利用workspace管理多个项目和依赖，提取公共的babel，eslint，webpack等 路由管理：路由加载指定的js（可能是avr中的任一），公共代码提前加载（类似懒加载和Webpack代码分割的思路）

[yuanxiaowa]

• 路由统一管理
  • 初始化的时候由让各个项目提供路由表
  • 渲染由各自框架去渲染

[hubvue]

微前端架构，提供总线注册机制，使用systemjs加载各个spa。https://github.com/hubvue/Micro-FE

[hellojackhui]

这个问题可以看一下美团技术年货，有一篇专门介绍了微前端架构，可以解决这个问题

一年前端菜鸟就这个题能答一点，其他的很晕😭😭

[nelsonkuang]

考虑到最容易实现，技术含量最低，最不容易出错的方式。现在我们对老的ng项目+新的vue项目混在一起的方式就是把vue项目放到ng项目的iframe里面来实现

[zhaihaoran]

1. 通过iframe嵌套的方式，实现多项目复用（没啥技术含量，组件、数据之间交互别想了）
2. 核心代码发布到统一的工具云上，各个项目就引用工具壳去从远端加载。 eg. 比如react项目里要引用一个vue项目的组件。可以把vue的这个组件单独做成包发布出去，react项目引用一个转换包去加载。

[nelsonkuang]

1. 通过iframe嵌套的方式，实现多项目复用（没啥技术含量，组件、数据之间交互别想了）
2. 核心代码发布到统一的工具云上，各个项目就引用工具壳去从远端加载。 eg. 比如react项目里要引用一个vue项目的组件。可以把vue的这个组件单独做成包发布出去，react项目引用一个转换包去加载。

iframe之间的组件及数据交互可以通过postMessage、url传参及同域共享cookie，localstorage来解决的，高大上的去把简单问题复杂化要耗费的时间及人力成本在小公司是承受不了滴

[hubvue]

1. 通过iframe嵌套的方式，实现多项目复用（没啥技术含量，组件、数据之间交互别想了）
2. 核心代码发布到统一的工具云上，各个项目就引用工具壳去从远端加载。 eg. 比如react项目里要引用一个vue项目的组件。可以把vue的这个组件单独做成包发布出去，react项目引用一个转换包去加载。

老铁，为什么要用iframe？难道不考虑性能吗？ 完全可以考虑微前端架构，组件项目间通讯提供一个统一的通信机制就可以了。 https://github.com/hubvue/Micro-FE

[Jerrodly]

微前端架构，提供总线注册机制，使用systemjs加载各个spa。https://github.com/hubvue/Micro-FE

老铁，有考虑融入sso？

[ewrfedf]

把 vue angular 当做 UI 框架，业务抽离去底层，MVP 这种隔离，这样也有可能失去框架特性，。。

[IrvingZhao]

这种可以统一规划一次路径，处理一次各个不同的项目的跳转的处理。 通过nginx，在不同的path上进行切换，项目打包时开启chunk的hash以及浏览器强缓存，相对于其他的方案来说，改动量、加载效率都还是可以接收的。 没有必要把所有的不同的项目打包到1个页面上

[brianzhang]

如果我是多个React项目，想通过一个管理入口来管理这些项目的系统模块 如何实现呢