Одно приложение для реагирования импортировано в другое приложение для реагирования?

Question

Можно ли импортировать одно приложение React (созданное с использованием create-response-app) в другое совершенно другое приложение React. Все мы импортировали компоненты в наш SPA, но можно ли полностью импортировать другое приложение? Если да, то как?

Кроме того, оба этих реагирующих приложения МОГУТ иметь несколько похожих зависимостей / файлов / библиотек... например, bootstrap / css / Redux store / и т. Д. Также с возможностью использования нескольких распространенных редукторов. Этим общим редукторам может потребоваться взаимодействие / прослушивание действий между этими двумя реагирующими приложениями.

Допустим, у нас есть:

ReactDOM.render(<Provider store={store}><MainApp /></Provider>, document.getElementById('root'));

Могу ли я добавить еще одно подобное приложение (которое НЕ было встроено в это) и нацелить еще один кивок в дом???

ReactDOM.render(<Provider store={store}><ExternalAPP /></Provider>, document.getElementById('root22'));

Делалось ли это когда-нибудь раньше? React сжимает все наши компоненты в "куски", которые в основном представляют собой файлы js.

Спасибо за любые советы / предложения / подсказки

Answer 1

Вы можете использовать npm pack команда.

Он создает файл tarball (.tgz) из вашего текущего приложения. Затем переместите этот файл в другую папку приложения, затем запустите:

npm install app1 (при условии, что app1 - ваше первое имя приложения).

После его установки вы можете увидеть свои файлы app1 внутри node_modules/App1/. Теперь вы можете импортировать нужные файлы или компоненты и использовать их в других приложениях.

Надеюсь это поможет.

Также проверьте это: https://docs.npmjs.com/cli-commands/pack.html

Answer 2

Один из способов, который сработал для меня, — перенести CRA на Github иnpm installэто как зависимость. Я настоятельно рекомендую вам ознакомиться с этим ресурсом, в котором подробно объясняется, как подготовить компонент React для этого процесса. Следуйте инструкциям в связанном руководстве до № 3, затем перенесите все (включая папку /dist) на Github. Затем сделайтеnpm install org_name/repo_nameи установите его как зависимость во втором приложении React. Затем, чтобы импортировать определенный компонент, вы можете сделать что-то вродеimport { Button } from 'repo_name/dist/index'или ссылайтесь на любой файл, который вы использовали для экспорта своих компонентов.

Если ссылка не работает, вот шаги в статье:

1. Создайте папку под названиемlibв котором хранятся все компоненты, которые вы хотите добавить в другое реагирующее приложение. Также определите файл с именемindex.jsв этой папке, которая экспортирует эти компоненты.
2. Создайте репозиторий для компонентов на Github.
3. Установите Babel и соберитеdistпапка.(npm install --save-dev @babel/core @babel/cli @babel/preset-envиnpm install -save @babel/polyfill)
4. Добавьте следующий файл конфигурации в папку верхнего уровня вашего проекта:

      {
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}

5. В package.json замените скрипт сборки следующим:"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
6. Запустите командуnpm run build