[英]Load assets accompanying a Javascript from a remote location
We are running 2 servers.我们正在运行 2 台服务器。 Server 1 hosts a react application.服务器 1 托管一个 React 应用程序。 Server 2 hosts a webcomponent exposed as a single javascript bundle along with some assets such as images.服务器 2 托管一个作为单个 javascript 包公开的 webcomponent 以及一些资产,例如图像。 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.我们正在服务器 1 上托管的 React 应用程序中动态加载服务器 2 上托管的 webcomponent Javascript。它是 webcomponent 的事实可能会也可能不会影响问题。
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.发生的事情是 webcomponent 使用了资源,例如位于服务器 2 上的图像。但是当 react 应用程序加载 webcomponent 时,由于它在服务器 1 上本地查找图像,因此找不到图像。
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.由于服务器 1 应用程序和服务器 2 应用程序由不同的团队开发,因此两者都应该能够以最自然的方式进行开发,而不会考虑到其他应用程序可能加载他们的应用程序。
The fixes that I could think of was:我能想到的修复是:
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.由于 react 应用程序知道在哪里访问服务器 2,我们不能编写一些巧妙的 javascript 来让浏览器在服务器 2 加载的 Javascript 请求资源时转到服务器 2。
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>
with default type="text/javascript"
)下载您的 Web 组件,您可以使用document.currentScript.src
检索加载文件的 URL。
If you download the file as a module script ( <script>
with type="module"
), you can retrieve the URL by using import.meta.url
.如果您将文件下载为模块脚本( <script>
with type="module"
),您可以使用import.meta.url
检索 URL。
Parse then the property to extract the base path to the Web Component.然后解析该属性以提取 Web 组件的基本路径。
Example of Web Component Javascript file: 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 )
How about uploading all required assets to a 3rd location, or maybe an AWS S3 bucket, Google Drive, Dropbox etc.?如何将所有必需的资产上传到第三个位置,或者可能是 AWS S3 存储桶、Google Drive、Dropbox 等? That way those assets always have a unique, known URL, and both teams can access them independently.这样,这些资产始终具有唯一的已知 URL,并且两个团队都可以独立访问它们。 As long as the names remain the same, so will the URLs.只要名称保持不变,URL 也将保持不变。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.