这是几个月前我在客户工作中也面临的一个有趣问题，我没有看到太多的文档方法。我们所做的是：

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

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

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

4. 核心应用程序有一个 PluginCache 类/module，它只保存加载插件的缓存（pluginId -> 无论插件导出，fn，类，等等）。如果某些代码需要一个插件来呈现，它会向这个缓存请求它。这样做的好处是允许在插件未正确加载时返回一个<Loading />或<Error />组件，等等。

5. 对于插件加载，这个 PluginService/Manager 加载插件配置（我应该加载哪些插件？）然后创建动态注入的script标签来加载每个插件包。当 bundle 完成时，register第 3 步中描述的调用将被调用，第 4 步中的缓存将包含该组件。

6. 不要尝试直接从您的组件加载插件，而是从缓存中请求它。

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

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

祝你好运，希望它以某种方式有所帮助！

您可以导入一个 HOC 组件来执行此操作。组件作为微型应用程序动态加载到您的主机应用程序中。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

window.React = React;
window.ReactDOM = ReactDOM;

ReactDOM.render(<App />, document.getElementById('root'));

// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from '@schalltech/honeycomb-react-microapp';

const App = () => {
  return (
    <MicroApp
        config={{
          View: {
            Name: 'redbox-demo',
            Scope: 'beekeeper',
            Version: 'latest'
          }
        }}
      />
  );
});

export default App;

这些组件在设计时未安装或未知。如果您有创意，使用这种方法您可以更新您的组件，而无需重新部署您的主机应用程序。

https://github.com/Schalltech/honeycomb-marketplace#using-micro-apps

我在一个类似的问题上提出了另一种方法。回顾：

在您的应用上

import(/* webpackIgnore: true */'https://any.url/file.js')
  .then((plugin) => {
    plugin.main({ /* stuff from app plugins need... */ });
  });

在你的插件...

const main = (args) => console.log('The plugin was started.');
export { main };
export default main;

在其他问题的页面上查看更多详细信息。