从远程位置加载伴随Javascript的资产 [英] Load assets accompanying a Javascript from a remote location
问题描述
我们正在运行2台服务器。服务器1托管反应应用程序。服务器2托管作为单个javascript包公开的Web组件以及一些资产（如图像）。我们在服务器1上托管的反应应用程序中动态加载托管在服务器2上的Web组件Javascript。它是一个web组件的事实可能会也可能不会影响该问题。
We are running 2 servers. Server 1 hosts a react application. Server 2 hosts a webcomponent exposed as a single javascript bundle along with some assets such as images. We are dynamically loading the webcomponent Javascript hosted on Server 2 in our react app hosted on Server 1. The fact that it is a webcomponent might or might not affect the issue.
正在发生的事情是web组件使用资产，例如位于服务器2上的图像。但是当反应应用加载web组件时，图像不会被发现为它在服务器1上本地寻找图像。
What's happening is that the webcomponent makes uses of assets such as images that are located on Server 2. But when the react app loads the webcomponent, the images are not found as its looking for the images locally on Server 1.
我们可以通过多种方式解决这个问题。我正在寻找最简单的解决方案。由于服务器1应用程序和服务器2应用程序由不同的团队开发，因此它们应该能够以最自然的方式进行开发，而不会考虑其他应用程序可能加载的应用程序。
We can fix this in many ways. I am looking for the simplest fix. Since Server 1 app and Server 2 apps are being developed by different teams both should be able to develop in the most natural way possible without making allowances for their app being potentially loaded by other apps.
我能想到的修正是：
- 利用绝对加载资产的URL - 需要提前知道部署的位置。
- 每当特定路径被命中时，向服务器1添加反向代理以重定向到服务器2 - 需要配置它。 React应用程序可以加载数百个web组件，即我们需要添加大量反向代理。
- 将所有资产嵌入到服务器2上的单个javascript中，就像将svgs嵌入到javascript中一样。 - 太有限了。如果SVG很大并且会使捆绑大小更大。
我希望实现类似的东西 -
由于反应应用程序知道在哪里命中服务器2，可以我们写一些聪明的javascript，只要服务器2加载的Javascript请求资产，浏览器就会进入服务器2.
I was hoping to implement something like -
Since the react app knows where to hit Server 2, can't we write some clever javascript that will make the browser go to Server 2 whenever assets are requested by a Javascript loaded by Server 2.
推荐答案
如果您通过经典脚本下载Web组件（< script> ，默认 type =text / javascript）您可以使用 document.currentScript.src 。
If you download your Web Component via a classic script (<script> with default type="text/javascript") you can retrieve the URL of the loaded file by using document.currentScript.src.
如果你下载了文件作为模块脚本（< script> ， type =module） ，您可以使用 <$来检索网址C $ C> import.meta.url 。
If you download the file as a module script (<script> with type="module"), you can retrieve the URL by using import.meta.url.
然后解析该属性以提取Web组件的基本路径。
Parse then the property to extract the base path to the Web Component.
Web组件Javascript文件示例：
Example of Web Component Javascript file:
( 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 )
这篇关于从远程位置加载伴随Javascript的资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
