电子渲染器中的 IPC 因缺少函数 __dirname 而引发错误 [英] IPC in electron renderer throws error from missing function __dirname

问题描述

我想使用以下代码从渲染器向主进程发送消息，然后主进程使用电子日志将其写入日志文件.我的 main.js 看起来像这样:

I wanted to use the following code to send a message from the renderer to the main process, which then writes it to a log file using electron-log. My main.js looks like this:

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const { ipcMain } = require('electron');
const log = require('electron-log');
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    frame: true,
    width: 400,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false
    }
  })

  ipcMain.on('infoLog', (event, args) => {
    log.info(args)
   });
....

现在我尝试在我的 App.vue 中相应地解决 IPC:

Now I tried to address the IPC in my App.vue accordingly:

import Navbar from '@/components/Navbar'
const { ipcRenderer } = require('electron')

export default {
  name: 'App',
  components: {
    Navbar
  },
  created: function () {
    ipcRenderer.send('infoLog','A async message to main')
  }
}

当我用 yarn electron:serve 启动它时，我在窗口的控制台中看到了这个错误:

When I start it with yarn electron:serve I see this error in the console of the window:

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:2778)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js:5)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js:2)
    at Module../src/App.vue?vue&type=script&lang=js (app.js:1099)

我不明白的是，我的设置与 Electron 的文档完全一样:

What I don't understand is that I set it up exactly like Electron's doc:

https://www.electronjs.org/docs/api/ipc-main

推荐答案

这里有两个不同的问题:

You have 2 different issues here:

• 正确的 webpack 配置以支持 node.js 代码
• 缺少节点集成以使用像 require
这样的节点 API

• the correct webpack configuration to support node.js code
• missing node integration to use node API like require

您在此处看到的堆栈跟踪可能来自不正确的 webpack 配置.除非另有说明，webpack 会尝试用不同的东西替换 __dirname.在这里我们不希望那样 - node 提供了 __dirname 并且我们想要使用它，所以我们必须告诉 webpack 离开 __dirname .

The stacktrace you are seeing here likely comes from an incorrect webpack configuration. Unless told otherwise, webpack tries to replace __dirname with something different. Here we don't want that - node provides __dirname and we want to use it, so we have to tell webpack to leave __dirname alone.

您可以在 webpack 文档中找到一个示例.

You'll find an example in the webpack documentation.

对于 webpack 5，添加节点部分应该会有所帮助:

For webpack 5 adding a node section should help:

module.exports = {
  //...
  node: {
    global: false,
    __filename: false,
    __dirname: false,
  }
};

解决此问题后，您可能会遇到浏览器窗口不知道require 的问题.您可以使用预加载脚本重新引入特定节点 API，如 IPC.不要在不知道自己在做什么的情况下激活全节点集成.

After you solved this problem you'll likely fall over the issue that your browser window does not know require. You can reintroduce specific node API like the IPC by using a preload script. Don't activate the full node integration without knowing what you are doing.

举个例子，看看这个答案.

这篇关于电子渲染器中的 IPC 因缺少函数 __dirname 而引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！