如何在 iframe 中呈现完全捆绑的 React 应用程序？答案

【问题标题】：How can I render a fully bundled react app inside of an iframe?如何在 iframe 中呈现完全捆绑的 React 应用程序？
【发布时间】：2020-07-13 19:30:39
【问题描述】：

高级概述：

我正在构建一个 SDK，以允许人们将自定义工具构建到我们现有的应用程序中。出于安全原因，这些自定义工具将托管在 iframe 中。它们需要能够从父窗口接收数据，并在 iframe 中操作相关数据时将更改传达回父窗口。

如何从我的父应用程序中的自定义工具访问构建的可执行文件，以便在 iframe 中呈现它们？如果有用，很乐意提供代码 sn-ps，但更多的是寻找入门方向。

谢谢！

【问题讨论】：

标签： javascript reactjs webpack iframe create-react-app

【解决方案1】：

下面的 React 元素在 iframe 中呈现，它需要包含 react.production.min.js 和 react-dom.production.min.js 以及 Babel 转译的 React 应用程序：

ReactDOM.render(
  (<h1>Hello!</h1>),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

请注意，当实际包含在 iframe 中时，对 ReactDOM 的调用是不同的，因为它已从 JSX 转换为常规 ES6，但除此之外它几乎是复制粘贴：

【讨论】：

这太棒了，非常感谢！您如何将转译的 react 应用程序代码放到 iframe 可以使用的地方？我试图通过 npm run build 然后获取构建文件夹，将其放入我的项目中，并以某种方式让路径动态工作。
你必须在你的 package.json 中设置一个 babel 脚本，这对 IMO 来说是一个巨大的痛苦，但你可以找到说明 here。如果您正在处理一些小事情，您实际上可以在以下位置手动完成：babeljs.io/repl
很抱歉一直打扰您，但到目前为止，您一直是一座金矿。我不能感谢你！你能想到这怎么可能与一个完整的 webpack 包有关，它有自己的所有依赖项和一个 html 入口点？和/或带有单个可执行文件的完整 webpack 包。
老实说，我对整个工作流程不是很熟悉（我自己就是一个 Closure Compiler 人），但看起来有一个很好的教程：valentinog.com/blog/babel