动态加载React组件

Question

我正在考虑构建一个Web应用程序，人们可以在其中安装插件。我希望插件能够定义将呈现到页面的React组件，而无需在安装插件后重新编译主JavaScript包。

所以这是我正在考虑的方法：

• 使用webpack 将主要的JavaScript与React作为外部库捆绑在一起。
• 也让插件作者使用React作为外部库来编译其组件。

这样，我只运行一个React实例。我可能可以对其他一些经常使用的库执行相同的操作。

然后，问题是如何从服务器动态加载这些插件组件。假设我有以下组件：

class PluginRenderer extends React.Component{
  componentWillMount() {
    getPluginComponent(`/plugins/${this.props.plugin}/component.js`).then((com) => {
      this.setState({pluginComponent: com});
    })
  }

  render() {
    var Plugin = this.state.pluginComponent;
    return Plugin ? <Plugin {...this.props} /> : "Loading..."
  }
}

如何getPluginComponent实施？

Answer 1

几个月前，我还在客户工作中遇到了一个有趣的问题，而且我没有看到太多的文档方法。我们所做的是：

1. 各个插件将是单独的Webpack项目，我们为它们提供模板或生成项目模板的CLI工具。

2. 在这个项目中，我们externals为核心应用程序中已使用的共享供应商库定义Webpack ：React，Redux等。这告诉插件不将其包含在捆绑软件中，而是从window我们在核心应用程序中设置的变量中获取它们。我知道，听起来很烂，但是比让所有插件重新包含1000个共享模块要好得多。

3. 重复使用的这一概念external，核心应用程序还通过窗口对象向插件提供了一些服务。最重要的一种PluginService.register()方法是插件初始化时必须调用的方法。我们在这里反转控制：该插件负责向核心应用程序说“嗨，我在这里，这是我的主要输出（如果是UI插件，则是Component）”。

4. 核心应用程序具有一个PluginCache类/模块，该类/模块仅保存已加载插件的缓存（pluginId->导出的插件，fn，class或其他内容）。如果某些代码需要插件来呈现，它将向该缓存请求。这样的好处是允许在插件未正确加载时返回<Loading />或<Error />组件，依此类推。

5. 对于插件加载，此PluginService / Manager加载插件配置（我应该加载哪个插件？），然后创建动态注入的script标签来加载每个插件包。捆绑包完成后，将register调用步骤3中描述的调用，并且步骤4中的缓存将具有该组件。

6. 与其尝试直接从组件中加载插件，不如从缓存中请求插件。

这是一个非常高层次的概述，与当时的需求密切相关（这是一个类似于仪表板的应用程序，用户可以在其中动态添加/删除面板，而所有这些小部件都作为插件实现）。

根据您的情况，您甚至可以用<Provider store={ theCoreStore }>
包裹插件，以便它们必须访问Redux，或设置某种事件总线，以便插件可以彼此交互…有很多东西需要弄清楚。:)

祝您好运，希望对您有所帮助！