javascript - 创建 React 应用程序 : embed end-user plugin at runtime

标签 javascript reactjs webpack create-react-app

我们有一个使用 CreateReactApp 创建/部署的 React 应用程序。

此应用程序能够显示一些小部件。我们已经预定义了使用我们自己的应用程序部署的小部件类型。我们希望我们应用程序的最终用户能够开发他们自己类型的小部件 - 使用像 Webstorm/VisualStudio 这样的开发工具 - 并将它们部署到我们的应用程序中。

  1. 我们的应用程序需要提供一个公共(public) API 和一个插件开发库
  2. 我们希望插件能够使用我们的应用程序正在使用的库(例如 React、material-ui……)
  3. 我们需要一种方法来“加载”使用我们的公共(public) API 注册新小部件类型的最终用户代码。

我们可以使用 CreateReactApp 做到这一点还是需要弹出?

执行此操作的最佳做​​法是什么?

最佳答案

我的建议多于答案,最佳实践可能取决于您当前项目的结构,因此我认为没有正确的答案。我写了一个小的概念验证,如果有帮助,请随意 fork 并使用它:https://github.com/anderick/react-dynamic-components .

  1. Our application needs to provide a public API and a plugin dev library

要解决这个问题,您可以创建一个文件夹结构,让用户上传他们的组件项目。

您需要一个名称或 ID 来链接这个新上传的项目,以便稍后加载它。

  1. We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)

如果只允许使用你已有的库,你不需要担心它们的package.json

如果您想允许用户使用他们自己的库,它会增加一些在运行时如何处理它的复杂性。

  1. We need a way to "load" end-user code that is registering new widget types using our public API.

您可以在这种方法中使用 create-react-app,但您可能需要一个好的入口点定义(在我的示例项目中,我使用 Index.js 作为我的文件将用作项目的主要组件)或某种描述符(可能扩展package.json)以便您可以从您的应用程序中读取以了解如何加载组件。我会选择第一种方法,convention over configuration 更简单,稍后您可以使用描述符对其进行扩展。

关于javascript - 创建 React 应用程序 : embed end-user plugin at runtime,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64871355/

相关文章:

javascript - lightbox2 与脚本冲突

javascript - 在 Javascript 中创建 getter 和 setter

css - 如何上下滚动边栏而不是整个窗口?

javascript - React fetch polyfill 在移动设备上不起作用

reactjs - React-router browserHistory.push 不导航到新页面

webpack - webpack 构建之外的服务器渲染脚本标签

javascript - Velocity.js 的性能非常低

javascript - 从公共(public)文件夹中 Fetch() 本地 json 文件返回 HTML 文件

node.js - React-Router 无法在组件内导入组件

css - 如何在 webpack 构建期间捕获不受支持的 css 属性