将React应用程序（与Webpack捆绑在一起）启动到React应用程序中

Question

我有一个与Webpack 4捆绑在一起的React应用程序打包成一个文件（bundle.js），我想将它作为一个组件启动到另一个React应用程序中。

import Component from '../../../build/bundle'

const AcomponentWithBundle = () => (
  <div>
    <Component />
  </div>
);

这当然不起作用

这是错误消息：

  

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

我理解该错误消息，因为在捆绑软件中我没有导出功能，但是我需要能够做到这一点并且不知道如何执行该操作。

谢谢！

Answer 1

在基于React组件的哲学中，在这种情况下，唯一允许的模式是：

• 重定向到另一个应用程序，而不假装嵌入
• 从另一个应用程序加载所需的组件而不嵌入整个应用程序

作为解决方法（为了保持dom，路由等），您可以在

中加载其他应用

Answer 2

通常的做法是创建一个NPM包并定义一个预打包脚本，以将您的React组件与Babel一起转译，然后将其发布，打包或链接到npm，以便您可以npm install在您的应用中。

Webpack应该用作整个构建过程的最后一步，以生成要在浏览器中运行的完整应用。