如何使用脚本标签为远程React应用提供服务？

Question

我们公司有一个React应用（使用create-react-app构建），今天可以通过iframe正常运行。

仅使用脚本标签（没有iframe标签）来服务该应用程序（始终嵌入在其他页面中）的需求就增加了。

我想到了类似的东西

<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
    InitMyApp('#app-placeholder', 'token', otherOptions)
</script>

我尝试在react应用的公用文件夹中创建init.js文件。我可以访问该文件。 从该文件中，如何将react应用本身呈现给指定的选择器（＃app-placeholder）？

由于此文件是按原样提供的，并且不会被webpack / babel编译，所以我不能使用import / jsx / require（）和其他东西。

我走对了吗？ 我应该手动转换该文件吗？ 此渲染方法还有其他解决方案吗？

Answer 1

您应该尝试使用{ output.library }配置编译器。这应该会产生一个准备好分发的编译输出，这意味着您可以轻松地在另一个文档中引用它（而不必担心，例如，编译/优化源代码，因为这已经由webpack执行了。）

这是webpack产生的multi-part library的示例。如您所见，入口点导出已分配给window。