同一个库(React)或框架的多个版本的单spa，如何处理

Question

从过去的几天开始，我已经经历了一个水疗中心，并且非常简单地设置和集成了frmawork(Angualar)应用程序或库(React/redux应用程序)。

但我有一个疑问

{
  "name": "single-spa-simple-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    ...
    "single-spa": "^4.3.4",
    "single-spa-react": "^2.10.2",
    "single-spa-vue": "^1.4.0",
    "single-spa-angular":"4.0.1",
    "vue": "^2.6.10"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js -p"
  },

考虑到今天我有10个或更多的React应用程序，在我需要开发最新的React应用程序(例如: React-18)之后的几个月，那么如何将该项目包含在这个现有的单一spa项目中，因为我们只有一个package.json文件和一个node_modules文件夹，我们不能在package.json文件中有两个不同版本的相同包名。

我不想在现有的React上工作。

1. 现有的应用程序应该在构建的相同版本中运行，新的React应用程序也应该运行。如果单SPA有一个

package.json文件，我还有一个疑问，考虑一下我有一个简单的应用程序有React 16和angular9应用程序，出于某种原因，我想要一个libray say XYZ，对于反应和角度的项目，但是他们想要不同版本的X.js

1. ，但是谁都有实现的想法，比如

。

Single-SPA
   |-AngularApp1
   |    | /src
   |    |-node_modules
   |    |-package.json (version 6)
   |
   |-AngularApp2
   |    | /src
   |    |-node_modules
   |    |-package.json  (version 9)
   |
   |-React
   |    | /src
   |    |-node_modules
   |    |-package.json 

Answer 1

在使用微前端时，这是一个常见的问题，尽管没有明确的最佳解决方案。

实际上，您需要使用自己的package.json将源代码分成多个NPM包，以允许不同的应用程序具有不同版本的依赖关系(React，XYZ )。然后，您可以将每个应用程序编译成一个包，并在单Spa中启动这些捆绑包。但仍然存在挑战。由于您现在无法完全共享相同的依赖项，所以站点包的总大小将增加。如果没有使用相同版本的React，您仍然不能在同一视图中同时运行多个React应用程序。

还有一些工具可以帮助解决这些问题，比如Lerna，但是您可能还不需要这种复杂性。还有其他创建微前端的方法，例如返回服务器端提供的HTML的微服务，因此集成不需要在构建时进行，比如使用单Spa，而是在运行时进行。这和其他一切一样，有利有弊。

因此，您可能会考虑，运行多个不同版本的React真的值得吗？也许对您的用户和开发人员来说，尝试升级到旧应用程序中的最新版本会更好。因为它们是微前端，所以它们应该更小，这意味着升级应该更容易。这也实现了您要下载的包更小，并且不需要更多的后端基础结构。但是你确实需要在所有的应用程序之间进行协作，以便同时升级。每种方法都有其自身的挑战。