一個反應應用程序導入另一個反應應用程序？

Question

是否可以將一個 React 應用程序（使用 create-react-app 構建）導入另一個完全不同的 React 應用程序。 我們都在 SPA 中導入了組件，但是否可以完全導入不同的應用程序？ 如果有怎么辦？

此外，這兩個 React 應用程序可能共享一些類似的依賴項/文件/庫.. 例如 bootstrap/css/Redux 存儲/等。 此外，還有一些常見的減速器的可能性。 這些常見的 reducer，可能需要在這兩個 react 應用程序之間進行交互/監聽操作。

假設我們有：

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

我可以添加另一個像這樣的應用程序（不是在這個應用程序中構建的），並在 dom 中定位另一個節點？？？

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

以前做過嗎？ React 將我們所有的組件壓縮成“塊”，基本上是 js 文件。

謝謝，任何提示/建議/提示

Answer 1

您可以使用npm pack命令。

它從您當前的應用程序創建一個 tarball (.tgz) 文件。 然后將此文件移動到其他應用程序文件夾，然后運行：

npm install app1 （假設 app1 是您的第一個應用程序名稱）。

安裝后，您可以在node_modules/App1/看到您的 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的文件夾，其中存儲您要帶到其他 react 應用程序的所有組件。 還要在此文件夾中定義一個名為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