Question

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

我想在运行时添加一个依赖项。例如，我创建了我的react js页面，对其进行了编译，但是它的代码加载了已编译的依赖项，并将组件动态注入到页面的div中。

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

Answer 1

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

一旦将插件捆绑为UMD模块（这是客户端库的默认选择），则可以将其导出作为捆绑程序配置（对于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模块。

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

1 个答案: