reactjs - 如何从已编译的 React JS 单页应用程序中包含已编译的 React JS 组件？

Question

通常，当我想使用 React js 依赖项时，我使用 npm 安装依赖项，然后将其源 JPX 包含在我的源 JPX 中，然后将整个内容(我的页面及其依赖项)编译到单个 Web 包中.

我想在运行时包含依赖项。例如，我创建了 React js 页面，对其进行编译，但它的代码加载已编译的依赖项并将组件动态注入(inject)到我的页面的 div 中。

这可能吗？有简单的方法吗？

Answer 1

属于不同bundle的应用程序和插件组件可以通过全局变量进行交互。

一旦插件被捆绑为 UMD 模块(这是客户端库的默认选择)，其导出可作为 bundler 配置中指定的全局变量(对于 Webpack 为 output.library )，例如SomePluginNamespace .

考虑到插件组件是从插件包导出的:

export const SomePluginComponent = prop => ...;

它是在主包之前加载的:

<script src="/plugin.bundle.js"></script>
<script src="/app.bundle.js"></script>

它将作为 window.SomePluginNamespace.SomePluginComponent 提供。在应用程序内部。 <script>标签可以由应用程序以编程方式创建，以动态加载插件包。

使用全局变量的另一种方法是为插件开发人员提供一个处理插件组件的框架，例如my-app-plugin-registry封装:

const CONTAINER_SYMBOL = Symbol.for('my-app-plugins-container');

const container = window[CONTAINER_SYMBOL] = window[CONTAINER_SYMBOL] || {};

export const registerComponent = (name, Component) => container[name] = Component;

export const getComponent = (name) => container[name];

插件开发者在自己的包中注册一个组件:

import { registerComponent } from 'my-app-plugin-registry';

export const SomePluginComponent = registerComponent('SomePluginComponent', prop => ...);

应用程序开发人员通过 getComponent 访问已注册的组件在另一个包中。这需要在应用程序脚本之前加载插件脚本。或者万一插件 <script>动态创建，使用getComponent仅在加载插件脚本后。

另一种方法是使用支持 JavaScript 模块的脚本加载器，特别是 SystemJS。应用程序包动态加载插件包:

System.import('.../plugin.bundle.js').then(({ SomePluginComponent }) => { ... });

SystemJS 应配置为正确处理插件包中的 UMD 模块。