single-spa с несколькими версиями одной и той же библиотеки (React) или Framework, Как обращаться

Question

Последние несколько дней я использую single-spa, и очень просто настроить и интегрировать приложения или библиотеки 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), то как включить этот проект в существующий проект с одним спа, поскольку у нас есть только один package.json и одну папку node_modules, у нас не может быть двух разных версий одного и того же пакета в файле package.json.

И я не хочу работать над существующим приложением React.

1. Существующие приложения должны работать в той же версии, в которой они были созданы, и новое приложение с поддержкой версий React также должно запускаться. возможно ли это в одноместном спа?

2. Если в одном SPA есть один файл package.json, у меня есть еще одно сомнение, считайте, что у меня есть простое приложение с приложением response-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 

Answer 1

Это обычная проблема, с которой сталкиваются при работе с микрофронтами, хотя нет однозначного лучшего решения.

Действительно, вам нужно будет разделить исходный код на несколько пакетов NPM с их собственным package.json, чтобы разные приложения могли иметь разные версии зависимостей (React, XYZ lib). Затем вы можете скомпилировать каждое приложение в пакет и запустить эти пакеты в Single-Spa. Но все еще есть проблемы. Общий размер пакета вашего сайта будет расти, поскольку теперь вы не можете полностью совместно использовать те же зависимости. Вы также по-прежнему не можете запускать несколько приложений React в одном представлении одновременно, если они не используют одну и ту же версию React.

Существуют также инструменты, которые могут помочь с некоторыми из этих проблем, например Lerna, но вам может не понадобиться эта сложность. Существуют также другие способы создания микрофронтендов, например микросервисы, которые возвращают обработанный на стороне сервера HTML, поэтому интеграция должна происходить не во время сборки, как в случае Single-Spa, а во время выполнения. У этого, как и у всего остального, есть свои плюсы и минусы.

Итак, вы можете подумать, действительно ли стоит запускать несколько разных версий React? Возможно, и вашим пользователям, и разработчикам лучше попытаться обновить старые приложения до последних версий. Поскольку это микрофронтенды, они должны быть меньше, а это значит, что обновление должно быть проще. Это также обеспечивает меньший размер загружаемого пакета и отсутствие необходимости в дополнительной внутренней инфраструктуре. Но для одновременного обновления вам необходимо совместно работать над всеми приложениями. У каждого подхода есть своя проблема.