从另一台服务器加载 ReactJS App 并执行答案

【问题标题】：Load ReactJS App from another server and execute从另一台服务器加载 ReactJS App 并执行
【发布时间】：2020-04-13 18:56:40
【问题描述】：

假设我们有一个网站，应该显示一个 reactjs 应用程序。

以下几点是必要的：

应使用简短的 sn-p (script / html) 嵌入 ReactJS 应用程序
应在不更改 sn-p 本身的情况下更新 ReactJS 应用程序
ReactJS 应用托管在完全不同的服务器上
如果可能，它不应该是 iFrame

所以我想要实现类似于谷歌地图的例子。你有一个小sn-p，你可以在你身边展示一个应用程序。

这样做的最佳做法是什么？我需要考虑什么？

【问题讨论】：

标签： javascript reactjs embed

【解决方案1】：

“微前端”：

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

我最近才想到这个想法。所以，关于你的要求，我没有太多要告诉你的。但它看起来很有希望。但也可能是矫枉过正。

通过以下链接，您将能够找到一些代码示例。

例如https://single-spa.js.org/docs/examples/

【讨论】：

【解决方案2】：

没有 iframe 的简单示例

<script>
(function(window,document, id, scriptUrl, appId){

    //  create container where to render app
    var containerDiv = document.createElement("DIV");   
    containerDiv.id=appId           
    document.getElementById(id).appendChild(node);


    //  add script tag
    var scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = scriptUrl;
    document.body.appendChild(scriptTag);

    //  also you may need to send you app info about where should render (id)
    window.MY_WIDGET_ID = appId

    })(window,document, 'where-to-render-app-id', 'script-url', 'app-id');</script>
<script >

// inside your react app you should add

render( document.getElementById(window.MY_WIDGET_ID ))

【讨论】：

【解决方案3】：

一个常规的 React 应用程序是一组 JS（这次我们忽略 CSS、图像和其他资产）文件。还有一个名为 entry 的文件，它将整个应用程序挂载到特定的 dom。您可能熟悉以下代码。

ReactDOM.render(<App/>, document.getElementById('app'))

上面的代码通常会在条目加载到预定义的 dom 后自动执行。我们可以将其公开为应用程序的初始处理程序。

window.apps = {} // This better be executed in a script hosted by the website
window.apps['my-app'] = dom => ReactDOM.render(<App/>, dom)

网站托管的脚本可以通过调用上述函数来启动应用程序。

window.apps['my-app'](document.getElementById('root'))

通过这种方式，网站可以随时将初始 React 应用程序控制到任何 dom 甚至任何实例上。

ps。忽略类型检查，空检查。您应该根据需要添加它，以确保不会发生运行时错误。

【讨论】：

【解决方案4】：

作为另一种选择，您可以将您的 React 应用程序包装到 Web 组件中。这是example。但这可能是过度设计，根据具体情况，mpc 的方法可能更容易合理。

【讨论】：

【解决方案5】：

您可以创建一个 shell 应用程序来加载您的远程代码并运行它。

顺便说一句，看看fronty，它是一个微前端工具，可以帮助你轻松解决这个问题。

【讨论】：

【解决方案6】：

这是 React 提供的功能之一。如果你使用 React 提供的 Basic 文件，它是一个带有 <div id="root"></div> 的 HTML 页面。默认情况下，React 构建为单页应用程序。事实上，你可以直接编辑这个 HTML 文件（位于 Public 文件夹中），React 仍然会运行。

因此，要实现您的目标，请构建您的 React 项目，将其包含到您的 HTML 项目中（在 public/index.html -> <script src="/static/js/main.******.chunk.js"></script> 中包含相同的包含。

在 React 项目中，添加相同的渲染条件：

if (document.getElementById("root")) {
    ReactDOM.render(
            <App />
        document.getElementById("root")
    );
}

将 ReactDom.render 包装在 if 中是为了确保所需的 ID 存在于您的 dom 中。

就是这样，它应该可以工作。玩得开心。

【讨论】：