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

IT技术 javascript reactjs web-component
2021-04-03 07:09:46

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

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

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

我能想到的修复是：

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

我希望实现类似的东西 -
由于react应用程序知道在哪里点击服务器 2，我们不能编写一些聪明的 javascript 来让浏览器在服务器 2 加载的 Javascript 请求资产时转到服务器 2。

2个回答

如果您通过经典脚本（<script>默认情况下type="text/javascript"）下载您的 Web 组件，您可以使用document.currentScript.src.

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

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

Web 组件 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 将为空。
2021-06-13 07:09:46

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

其它你可能感兴趣的问题
上一篇如何在 PWA 和 ReactJS 中创建动态 manifest.json 文件？ 下一篇React 的 setState 什么时候改变状态