Electron Forge — невозможно использовать ipcRenderer в файле рендерера

Я только что создал новое приложение, используя следующую команду:

npx create-electron-app my-new-app --template=typescript-webpack

Внутри renderer.ts я добавил следующий код

import "./index.css";
import { ipcRenderer } from "electron";

Но когда я запускаю npm run start, у меня возникает следующая ошибка в консоли браузера.

Uncaught ReferenceError: require is not defined

Обновить Что я пробовал:

webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const webpack = require("webpack");
module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  new webpack.ExternalsPlugin("commonjs", ["electron"]),
];

Но это все еще не работает.


node.js electron-forge electron
person Georgian Stan    schedule 19.06.2020    source источник

Ответы (3)


arrow_upward
16
arrow_downward

Найденное решение

Решение состоит в том, чтобы использовать ipcRenderer в сценарии предварительной загрузки.

preload.ts

import { ipcRenderer } from "electron";

index.ts

declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: any;

const mainWindow = new BrowserWindow({
  height: 600,
  width: 800,
  webPreferences: {
    preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
  },
});

package.json

  "plugins": [
    [
      "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.ts",
              "name": "main_window",
              "preload": {
                "js": "./src/preload.ts"
              }
            }
          ]
        }
      }
    ]
  ]
person Georgian Stan    schedule 19.06.2020
comment
Джордж, вы можете добавить declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: any; в качестве примечания для пользователей Typescript, иначе они получат сообщение об ошибке, поскольку компилятор TS не будет знать об этом Global. Это может быть определено в основном файле index.ts или вы можете переместить эти объявления объявления, включая объявление по умолчанию, в src/typings.d.ts после создания объявления объявления глобального { // вашего объявления const....here }. Если хотите, я могу отредактировать это для вас :) - person Blujedis; 27.03.2021
comment
Как тогда вы ссылаетесь на ipcRenderer в приложении? (например, компонент React?) - person Blue Waters; 08.05.2021
comment
@BlueWaters для отправки сообщения IPC из компонента React необходимо улучшить скрипт preload.ts: import { contextBridge, ipcRenderer } from 'electron'; contextBridge.exposeInMainWorld('dog', { bark(arg1, arg2) { ipcRenderer.invoke('dog.bark', arg1, arg2); } }); Теперь в вашем компоненте React доступна функция window.dog.bark(). - person srigi; 19.07.2021

arrow_upward
1
arrow_downward

Решение использует ContextBridge API от electron для электронной кузницы react+webpack шаблон

предварительная загрузка.js

import { ipcRenderer, contextBridge } from "electron";

contextBridge.exposeInMainWorld("electron", {
  notificationApi: {
    sendNotification(message) {
      ipcRenderer.send("notify", message);
    },
  },
  batteryApi: {},
  fileApi: {},
});

main.js

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      worldSafeExecuteJavaScript: true,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
 });

ipcMain.on("notify", (_, message) => {
   new Notification({ title: "Notification", body: message }).show();
});

пакет.json

 "plugins": [
    [
      "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.js",
              "name": "main_window",
              "preload": {
                "js": "./src/preload.js"
              }
            }
          ]
        }
      }
    ]
  ]

приложение.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component {
  componentDidMount() {
    electron.notificationApi.sendNotification("Finally!");
  }
  render() {
    return <h1>contextBridge</h1>;
  }
}

ReactDOM.render(<App />, document.body);
person Sathishkumar Rakkiasamy    schedule 29.07.2021

arrow_upward
0
arrow_downward

В index.js при создании нового окна используйте

win = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'app', 'assets', 'js', 'preloader.js'),
            nodeIntegration: true,
            contextIsolation: false
        },
    })

Просто добавьте nodeIntegration: true в webPreferences. Тогда вы сможете использовать require

person dommilosz    schedule 19.06.2020
comment
** nodeIntegration: true** не рекомендуется из соображений безопасности - person Georgian Stan; 19.06.2020
comment
Не нагромождать здесь, но @GeorgianStan прав, лучше не включать nodeIntegration. Его приведенный выше пример является правильным ответом. - person Blujedis; 27.03.2021