从远程位置加载Javascript附带的资产

我们正在运行2台服务器。服务器1承载一个react应用程序。Server2托管一个webcomponent，该webcomponent与一些资产（如图像）一起作为单个javascript包公开。我们正在服务器1上托管的react应用程序中动态加载服务器2上托管的webcomponent Javascript。事实上，它是一个网络组件，可能会也可能不会影响这个问题

现在的情况是webcomponent使用了服务器2上的图像等资产。但是当react应用程序加载webcomponent时，在服务器1上本地查找图像时，找不到图像

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

我能想到的解决办法是：

使用绝对URL加载资产-需要提前知道部署的位置

向服务器1添加反向代理，以便在点击特定路径时重定向到服务器2-需要配置此选项。React应用程序可以加载数百个网络组件，也就是说，我们需要添加很多反向代理

将所有资产嵌入服务器2上的单个javascript，就像将SVG嵌入javascript一样。-太狭隘了。如果SVG很大，会使捆绑包的大小变大 我希望实现类似-

---

既然react应用程序知道在哪里点击服务器2，我们就不能编写一些聪明的javascript，让浏览器在服务器2加载的javascript请求资源时进入服务器2。

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

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

如果您通过经典脚本下载Web组件（

，默认值为

type=“text/javascript”

），您可以通过使用来检索加载文件的URL

如果以模块脚本的形式下载文件（

和

type=“module”

），则可以使用检索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 ) 

（函数（路径）{
var base=path.slice（0，path.lastIndexOf（'/'））
define（'my comp'，类扩展HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
.innerHTML=``
} 
} )
}）（document.currentScript？document.currentScript.src:import.meta.url）

如果您通过经典脚本下载Web组件（

，默认值为

type=“text/javascript”

），您可以通过使用来检索加载文件的URL

如果以模块脚本的形式下载文件（

和

type=“module”

），则可以使用检索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 ) 

（函数（路径）{
var base=path.slice（0，path.lastIndexOf（'/'））
define（'my comp'，类扩展HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
.innerHTML=``
} 
} )
}）（document.currentScript？document.currentScript.src:import.meta.url）

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