Javascript 从“中的外部脚本加载React JS组件”；“运行时”；

我正在使用React JS+网页包。 我需要解决的一般情况是动态加载未与主应用程序绑定的React组件。一种可插拔组件，可以独立于主应用程序开发，然后由应用程序动态加载，而无需重建整个应用程序

具体情况如下

我有两个完全分离的模块（即使用不同的package.json和webpack.config.js构建）：

• MainApp

• 一些

  组件

我需要实施以下行为：

加载并初始化了

MainApp

的页面

MainApp

dynamicaly查找包含

组件的.js文件的url（例如，通过向web服务器发出GET请求）

MainApp

加载带有

组件的.js文件

，并将其作为

MainApp

在渲染时使用加载的

组件

---

这样的用例在react js+webpack中可能吗？

听起来你在问如何将react外部化。如果是这样，您可以在

webpack.config.js

文件中将库列为“externals”：

webpackConfig.externals = {
  "react": "React",
  "react-dom": "ReactDOM",
  ...
}

---

有了webpack 5，您现在可以通过

基本思想是将一个项目中的导出“公开”到另一个项目中：

应用程序1（使用应用程序2中的按钮）

应用程序2（显示按钮）

---

下面是一个。

GET请求返回一个已编译的组件？它返回有效的.js文件，而不是.jsx（如果您正在谈论它的话）。您是否找到了解决方案？没有。我为我的特殊任务找到了另一个解决方案，但它不能解决一般问题。我从json描述（如）动态创建组件。这使得动态组件在外观和行为上受到很大限制，但meI需要加载“编译时”（捆绑时）不存在的组件是可以的。我想你们说的是延迟加载，所以在捆绑应用程序时，所有组件都是已知的。不是萨米人有同样的需求。我需要使用一个外部的.js文件，该文件本身包含一个react组件，用于主react应用程序。外部.js文件在需要时在运行时动态加载。我将webpack配置为让externals react和react dom。但是每次加载external.js时，我都会得到以下错误：“[ReferenceError:react未定义]”。如何允许外部.js文件引用主应用程序中的react库？谢谢

//app.ts
import * as React from "react";

const RemoteButton = React.lazy(() => import("app2/Button"));

const App = () => (
  <div>
    <h1>Typescript</h1>
    <h2>App 1</h2>
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  </div>
);

export default App;

// src/Button.ts
import * as React from "react";

const Button = () => <button>App 2 Button</button>;

export default Button;