在Electron vite模板中使用utilityProcess

Question

Electron 新手和 Vite 在这里。我敢打赌这是一个简单的问题，我显然错过了。

我正在尝试使用 utilityProcess 运行后台进程。 fork 方法中的第一个参数是实用程序脚本的文件路径。

这是我的文件结构：

src
├── index.html
├── main.js
├── preload.js
├── renderer.js
├── test.js (utility process file)

这是我的

main.js

文件内容：

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
  }

  const { port1, port2 } = new MessageChannelMain()
  const child = utilityProcess.fork(path.join(__dirname, 'test.js'))
  child.postMessage({ message: 'test' }, [port1])

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

我知道问题出在我使用

path.join(__dirname, 'test.js')

上，因为如果我在没有 webpack 或 Vite 的情况下使用 Electron，那么这个方法就可以工作。我正在尝试通过 Vite 正确解析

test.js

文件，以便我可以执行该文件。我尝试了显式 URL 导入，但没有成功。

Answer 1

Vite 确实支持此功能，但需要使用

?modulePath

后缀导入子进程，以防止将子进程代码捆绑到 index.js 中。

请参阅 https://electron-vite.org/guide/dev#utility-process-and-child-process 了解更多信息，包括以下示例：

// main.ts
import { utilityProcess, MessageChannelMain } from 'electron'
import forkPath from './fork?modulePath'

const { port1, port2 } = new MessageChannelMain()
const child = utilityProcess.fork(forkPath)
child.postMessage({ message: 'hello' }, [port1])

port2.on('message', (e) => {
  console.log(`Message from child: ${e.data}`)
})
port2.start()
port2.postMessage('hello')


// fork.ts
process.parentPort.on('message', (e) => {
  const [port] = e.ports
  port.on('message', (e) => {
    console.log(`Message from parent: ${e.data}`)
  })
  port.start()
  port.postMessage('hello')
})