在“运行时”从外部脚本加载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]所以你不需要说在你的外部，除非你正在使用它