如何在 Electron 中掛鈎來自 javascript 的文件請求以產生正確的路徑？

Question

我正在創建一個 Electron 應用程序，並在此過程中嘗試使用一些現有的 javascript 和其他文件（css 和其他資源）。 我的代碼分布在多個包中，每個包 package 包含各種這些文件。 在 Electron 之外，這些文件將從服務器提供，該服務器提供從文件的平面列表到每個文件的路徑的映射，我正在嘗試在 Electron 的“后端”中實現類似的“服務器端”功能，如果有這樣的事情。

由於 Electron 從file://協議中獲取這些文件，因此它沒有找到其中的大部分文件，因為所有內容都相對於當前 javascript 文件的路徑進行解析，並且這些文件彼此不認識，因此無法指定硬-編碼路徑。

Electron 是否有某種機制來掛鈎文件請求，以便我可以提供它查看的路徑？ 在我的服務器端代碼中，我做了一些事情，我有一個 object 將文件名映射到它們所在的路徑，我覺得解決方案同樣是攔截請求並告訴 Electron 在哪里尋找每個文件。

我發現了這個問題，但那里提供的解決方案對我不起作用，因為我的 web 應用程序有點過於動態，並且請求來自代碼深處，而不是我可以捕獲的某些用戶界面元素。

Answer 1

您可以通過攔截文件協議處理程序來完成此操作。 如果您已將文件映射設置為 object，如下所示：

files = {
    "file1.js": "/path/to/file1.js",
    "file2.js": "/path/to/file2.js",
    // etc.
}

然后在 createWindow function 中，您將在實例化新的 BrowserWindow 后立即插入此代碼：

protocol.interceptFileProtocol("file", (req, cb) => {
    var file = req.url.split("/")
    file = file[file.length-1]
    if (files[file]) {
        console.log(`intercepting ${file} => ${files[file]}`)
        cb({path:files[file]})
    }
})

注意：該protocol引用了您從要求 electron 中獲得的const ，例如，如下所示：

const {app, BrowserWindow, protocol} = require("electron")

此代碼假定文件名是唯一的，並且是路徑中唯一重要的部分。 因此，例如，無論代碼認為“file1.js”在什么路徑中，在上面的示例中它將被重定向到/path/to/file1.js 。 如果請求的文件不存在，則行為未定義，可能不會加載任何內容。