在「運行時」從外部腳本加載React JS組件

Question

我正在使用React JS + webpack。 我需要解決的一般情況是動態加載未與主應用程序捆綁在一起的React組件。這種插件組件可以獨立於主應用程序開發，然後通過應用程序動態加載，而無需重新構建整個應用程序。

特殊情況如下。

我有兩個完全分離的模塊（即使用不同的package.json和webpack.config.js建）：

• 的MainApp
• 一些Component

我需要實現以下行爲：

1. 與的頁面3210加載並初始化。
2. MainApp動態查找包含Component（例如，通過向Web服務器發出GET請求）的.js文件的url。
3. MainApp負載與名爲.js文件Component，包括它頁面<script>
4. MainApp應用加載Component同時呈現。

這樣的用例可能在反應js + webpack中嗎？

Answer 1

這聽起來像你問如何外部化反應。如果是這樣，你可以圖書館在你的WebPack「的外部」 - 這裏有一個例子：https://github.com/flexicious/react-redux-datagrid/blob/master/config/webpack.config.js

webpackConfig.externals = { 
      "react": "React", 
     "react-dom": "ReactDOM", 
     "flexicious-react-datagrid":"flexiciousNmsp" 
} 

只是一個快速的注意flexicious反應的，數據網格是我們的反應DataGrid組件 - [http://reactdatagrid.com]所以你不需要說在你的外部，除非你正在使用它