从远程位置加载伴随 Javascript 的资产答案

【问题标题】：Load assets accompanying a Javascript from a remote location从远程位置加载伴随 Javascript 的资产
【发布时间】：2019-01-30 02:44:13
【问题描述】：

我们正在运行 2 台服务器。服务器 1 托管一个反应应用程序。服务器 2 托管一个作为单个 javascript 包以及一些资产（例如图像）公开的 Web 组件。我们在托管在服务器 1 上的 react 应用程序中动态加载托管在服务器 2 上的 web 组件 Javascript。它是 web 组件的事实可能会或可能不会影响问题。

发生的情况是 web 组件使用了位于服务器 2 上的资源，例如图像。但是当 react 应用程序加载 web 组件时，由于它在服务器 1 上本地查找图像，所以找不到图像。

我们可以通过多种方式解决此问题。我正在寻找最简单的解决方法。由于服务器 1 应用程序和服务器 2 应用程序是由不同的团队开发的，因此两者都应该能够以最自然的方式进行开发，而不会考虑到他们的应用程序可能会被其他应用程序加载。

我能想到的修复是：

使用绝对 URL 加载资产 - 需要提前知道部署位置。
向服务器 1 添加反向代理，以便在遇到特定路径时重定向到服务器 2 - 需要对此进行配置。 React 应用程序可以加载数百个 Web 组件，即我们需要添加大量反向代理。
将所有资产嵌入到服务器 2 上的单个 javascript 中，就像将 svg 嵌入到 javascript 中一样。 - 太局限了。如果 SVG 很大并且会使包大小变大。

我希望实现类似 -
既然 react 应用知道在哪里访问服务器 2，我们就不能编写一些巧妙的 javascript 来让浏览器在服务器 2 加载的 Javascript 请求资产时转到服务器 2。

【问题讨论】：

标签： javascript reactjs web-component

【解决方案1】：

如果您通过经典脚本（<script> 默认为type="text/javascript"）下载Web 组件，您可以使用document.currentScript.src 检索已加载文件的URL。

如果您将文件下载为 模块脚本（<script> 和 type="module"），您可以使用 import.meta.url 检索 URL。

然后解析属性以提取 Web 组件的基本路径。

Web Component Javascript 文件示例：

( function ( path ) {
    var base = path.slice( 0, path.lastIndexOf( '/' ) )

    customElements.define( 'my-comp', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${base}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url )

【讨论】：

您可能还会提到 import.meta.url 以防他们使用 esmodules。在这种情况下，document.currentScript 将为空。

【解决方案2】：

如何将所有必需的资产上传到第三个位置，或者可能是 AWS S3 存储桶、Google Drive、Dropbox 等？这样，这些资产始终具有唯一的已知 URL，并且两个团队都可以独立访问它们。只要名称保持不变，URL 也会保持不变。

【讨论】：