javascript - 动态加载 React 组件

Question

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

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

• 将主要的 JavaScript 与 React 捆绑为 external library , 使用 webpack。
• 让插件作者也使用 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. 在这个项目中我们定义Webpack externals对于已在核心应用程序中使用的共享 vendor 库:React、Redux 等。这告诉插件不要将它们包含在包中，而是从 window 中的变量中获取它们我们在核心应用程序中设置。我知道，这听起来很糟糕，但这比让所有插件重新包含 1000 个共享模块要好得多。

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

4. 核心应用程序有一个 PluginCache 类/模块，它只保存加载插件的缓存(pluginId -> 插件导出的任何内容、fn、类等)。如果某些代码需要插件来呈现，它会向此缓存请求。这具有允许返回 <Loading /> 的好处或 <Error />插件未正确加载时的组件，等等。

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

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

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

根据您的情况，您甚至可以用 <Provider store={ theCoreStore } 包装插件> 所以他们必须访问 Redux，或者设置某种事件总线，以便插件可以相互交互……前面有很多东西需要解决。 :)

祝你好运，希望对你有所帮助!