1

过去几天我一直在经历 single-spa，设置和集成 frmawork（Angular）应用程序或库（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），然后如何将该项目包含在这个现有的单水疗项目中，因为我们只有一个package.json 文件和一个 node_modules 文件夹，我们不能在 package.json 文件中有两个不同版本的相同包名。

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

  1. 现有的应用程序应该在它构建的相同版本中运行，并且新的 React 版本的应用程序也应该运行。这在单水疗中可能吗？

  2. 如果单个 SPA 有一个 package.json 文件，我还有一个疑问，考虑我有一个具有 react-16 和 angular9 应用程序的简单应用程序，出于某种原因，我想要一个库说 XYZ ，用于 React 和 Angular 项目，但是他们想要不同版本的 X.js

  3. 有没有人有像这样的实施想法

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

1 回答 1

1

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

实际上，您需要将您的源代码拆分为多个 NPM 包，并使用它们自己的 package.json 来允许不同的应用程序拥有不同版本的依赖项（React、XYZ lib）。然后，您可以将每个应用程序编译成一个包并在 Single-Spa 中启动这些包。但仍然存在挑战。由于您现在无法完全共享相同的依赖项，因此您的总站点捆绑包大小将会增加。如果多个 React 应用程序不使用相同版本的 React，您也仍然不能同时在同一个视图中运行多个 React 应用程序。

还有一些工具可以帮助解决其中的一些问题，例如 Lerna，但您可能还不需要那种复杂性。还有其他创建微前端的方法，例如返回服务器端呈现的 HTML 的微服务，因此不需要像 Single-Spa 那样在构建时进行集成，而是在运行时进行。与其他一切一样，这有利也有弊。

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

于 2020-04-30T20:07:37.363 回答