Javascript 如何使用脚本标记为远程React应用程序提供服务？_Javascript_Reactjs_Web_Webpack

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

javascript reactjs web webpack

Javascript 如何使用脚本标记为远程React应用程序提供服务？,javascript,reactjs,web,webpack,Javascript,Reactjs,Web,Webpack,我们公司有一个react应用程序（使用create react应用程序构建），目前通过iframe提供，运行良好人们越来越需要只使用一个脚本标记（没有iframe标记）来为应用程序提供服务（它总是嵌入在其他页面中）我想到了这样的事情： <div id="app-placeholder"></div> <script src="https://our-app.com/init.js"></script> // this will create a

我们公司有一个react应用程序（使用create react应用程序构建），目前通过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>


//这将创建一个名为window.InitMyApp的函数
InitMyApp（“#应用占位符”、“令牌”和其他选项）

我尝试在react应用程序的公用文件夹中创建

init.js

文件。我可以访问该文件。从该文件中，如何将react应用程序本身呈现给给定的选择器（#应用程序占位符）

因为这个文件是按原样提供的，不会被webpack/babel传输，所以我不能使用import/jsx/require（）和其他东西

我走对了吗？我应该手动传输此文件吗？

此呈现方法还有其他解决方案吗？

您应该尝试使用配置编译器。这将生成一个可供分发的编译输出，这意味着您可以轻松地在另一个文档中引用它（并且不需要担心传输/优化源代码，因为这已经由webpack执行）

下面是一个由webpack生成的示例。如您所见，入口点导出被分配到

窗口

谢谢你的回答，这似乎是正确的解决方案。现在我遇到了一个问题，Webpack试图使用托管应用程序的url加载块文件，显然得到了404。有没有办法解决这个问题？@IdanPtichi通过提供完整的URL可能是一个好的开始。