如何使用脚本标签为远程 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。