Electron: प्रतिक्रिया में इलेक्ट्रॉन आयात करते समय त्रुटि | आयात {ipcRenderer} 'इलेक्ट्रॉन' से

सीआरए वेबपैक का उपयोग करता है जो मानक मॉड्यूल लोडिंग (एफएस सहित) के साथ खिलवाड़ करता है।

मैं वेबपैक के लिए इलेक्ट्रॉन मोड में देखने और सीआरए से बाहर निकलने की सलाह दूंगा

गिटहब मुद्दे फीचर अनुरोधों और बग रिपोर्ट के लिए हैं, इलेक्ट्रॉन का उपयोग करने के बारे में प्रश्न समुदाय या स्लैक चैनल को निर्देशित किए जाने चाहिए।

@MarshallOfSound मेरी गलती है।

मुझे समस्या # 7300 में समाधान मिला अगर यह किसी की मदद कर सकता है।

const { ipcRenderer } = window.require('electron');

कृपया ध्यान दें कि जब आप इलेक्ट्रॉन ऐप चलाते हैं तो यह काम करेगा, लेकिन अगर आप ब्राउज़र के अंदर अपने रिएक्ट कोड का परीक्षण करना चाहते हैं तो यह अभी भी क्रैश हो जाएगा (विंडो.require ब्राउज़र में परिभाषित नहीं है क्योंकि यह इलेक्ट्रॉन में है)।

यदि आप app.quit() को एक्सेस करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

const {ऐप} = window.require ('इलेक्ट्रॉन')। रिमोट;

शायद यह किसी की मदद करता है ...

@CiriousJoker ये समाधान हैं, धन्यवाद!

मुझे अभी भी window.require is not a function । मैं प्रतिक्रिया स्टार्टर किट (https://github.com/kriasoft/react-starter-kit) के साथ इलेक्ट्रॉन का उपयोग कर रहा हूं। इसके अलावा सब कुछ ठीक काम कर रहा है।

मैंने वेब से अपना ऐप लोड करने के लिए अपना इलेक्ट्रॉन ऐप सेट किया है, इसलिए ऐप स्थानीय रूप से नहीं चल रहा है:
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

मैं जो करने की कोशिश कर रहा हूं, वह मेरी प्रतिक्रिया फाइलों में से एक में ipcRenderer को कॉल कर रहा है। मुझे यकीन नहीं है कि यह तब भी संभव है जब मेरा ऐप वेब से लोड किया जा रहा हो। कोई सुझाव?

@holgersindbaek

उसी नाव में जैसे आप... क्या आपको कोई समाधान मिला?

नहीं, मुझे पूरा यकीन है कि ब्राउज़र से ipcRenderer लोड करना संभव नहीं है।

यदि आप ब्राउज़र में अपना रिएक्ट ऐप चला रहे हैं तो यह काम नहीं करेगा। इसे इलेक्ट्रॉन के अंदर चलाएं और आपको ठीक होना चाहिए।

@Amthieu सलाह के लिए धन्यवाद। मुझे अभी भी संदेह है कि मैं अपने रिएक्ट प्रोजेक्ट (रिएक्ट स्टार्टर किट के आधार पर) को इलेक्ट्रॉन में कैसे चला सकता हूं। किसी भी सलाह की काफी सराहना की जाएगी:

https://discuss.atom.io/t/getting-electron-to-work-with-react-starter-kit/48594

ठीक है, मेरे पास समाधान है।

1) कोड के साथ preload.js file बनाएं:

window.ipcRenderer = require('electron').ipcRenderer;

2) इस फ़ाइल को अपने main.js में webPreferences माध्यम से प्रीलोड करें:

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

3) अब, आपके पास अपने रिएक्ट ऐप से एक्सेस होगा। जैसे यह काम करेगा:

componentDidMount() {
        if (isElectron()) {
            console.log(window.ipcRenderer);
            window.ipcRenderer.on('pong', (event, arg) => {
                this.setState({ipc: true})
            })
            window.ipcRenderer.send('ping')
        }
    }

नोट - इसका उपयोग करते हुए: isElectron() फ़ंक्शन के लिए https://github.com/cheton/is-electron

@HemalR चरण 3 निम्नलिखित (अब) होना चाहिए:

componentDidMount() {
    if (window.isElectron) {
        console.log(window.ipcRenderer);
        window.ipcRenderer.on('pong', (event, arg) => {
            this.setState({ipc: true})
        })
        window.ipcRenderer.send('ping')
    }
}

नोट : window.isElectron एक फ़ंक्शन नहीं है।

@nparsons08

क्षमा याचना - मुझे जहां से isElectron मिल रहा है उसे जोड़ना चाहिए था, मेरे कोड उदाहरण को लिंक के साथ संपादित किया है: https://github.com/cheton/is-electron

@holgersindbaek
क्या अब कोई समाधान है

मेरे लिए केवल तभी काम करें जब nodeIntegration true ;

webPreferences: {
      nodeIntegration: true, 
      preload: __dirname + '/preload.js'
}

@HemalR समाधान बढ़िया काम करें!

अब प्रतिक्रिया करने के लिए इलेक्ट्रॉन से कैसे भेजें?

के साथ कोशिश की
इलेक्ट्रॉन पक्ष पर

 ipcMain.emit("pong", "Hello!"); 

लेकिन प्रतिक्रिया श्रोता से कुछ नहीं मिला

window.ipcRenderer.on("pong", (event, arg) => {
        console.log("PONG");
});

ipcMain.emit() का उपयोग करना सही है या क्या मुझे कुछ और उपयोग करना चाहिए?

ठीक है बस पाया कि मुझे उपयोग करना है (इलेक्ट्रॉन मुख्य प्रक्रिया पर)

mainWindow.webContents.send("pong", "Hello!");

सभी को धन्यवाद!

मैंने उपरोक्त सभी की कोशिश की, कोई फायदा नहीं हुआ। मेरे लिए जो काम किया वह एक विशाल हैक था। फ़ाइल ./node_modules/electron/index.js संशोधित करें और हार्ड कोड को electron.exe . के पथ को संशोधित करें

जैसे

function getElectronPath() {
  return 'D:\\Repos\\MyProject\\node_modules\\electron\\dist\\electron.exe';
}

module.exports = getElectronPath();

वाह, मैं अपने रिएक्ट कंपोनेंट्स पर काम करने वाला IPCRenderer नहीं प्राप्त कर सका। मैंने उपरोक्त सभी विधियों की कोशिश की है। क्या आप में से किसी के पास संयोग से कोई संकेत है कि मैं इसे काम करने के लिए उपयोग कर सकता हूं? धन्यवाद

हम्म... मेरा इलेक्ट्रॉन ऐप अभी भी ऊपर दिए गए मेरे समाधान का उपयोग करके ठीक काम करता है - लेकिन मैंने इसे कुछ महीनों में अपडेट नहीं किया है (इसकी आवश्यकता नहीं है)।

मुझे आश्चर्य है कि क्या कोई ब्रेकिंग बदलाव है जो इसे काम करने से रोकेगा? हो सकता है कि आप लोग अपने इलेक्ट्रॉन संस्करण पोस्ट कर सकें?

@cyclonstep क्या आपको कोई विशिष्ट त्रुटि मिल रही है? कोड स्निपेट या कुछ लॉग के बिना मदद करना मुश्किल है ...

मैं बंडलिंग के लिए पार्सल का उपयोग कर रहा हूं।
Window.require ने इसे मेरे लिए भी हल किया (यह भी दिखा रहा है, क्या नहीं):

'vue/dist/vue.min' से Vue आयात करें
'./App' से ऐप आयात करें

// खराब? आयात {ipcRenderer} 'इलेक्ट्रॉन' से
// खराब? const {ipcRenderer} = आवश्यकता ('इलेक्ट्रॉन')
// अच्छा:
const {ipcRenderer} = window.require ('इलेक्ट्रॉन')

(उसी फ़ाइल में आगे नीचे इलेक्ट्रॉन "पोंग-डेमो" है , जो थोड़े से साबित होता है, यह काम करता है)

शायद ध्यान देने योग्य: गलत करने पर भी, बंडल का आकार नहीं बढ़ता (इलेक्ट्रॉन-आवश्यकता के बिना तुलना करें। यह अब तक मेरा पहला और अब तक का एकमात्र रेंडर-साइड इलेक्ट्रॉन आयात है) पूरे इलेक्ट्रॉन आकार या इस तरह से, लेकिन केवल लगभग 20kb तक , जो अपने आप में कुछ शिम/आवरण कोड प्रतीत होता है, जो node_modules/electron-download/node_modules/debug/dist/debug.js :242:ff... से आ रहा है।

2: [function (require, module, exports) {
  // shim for using process in browser
  var process = module.exports = {}; // cached from whatever global is present so that test runners that
 stub it

वैसे भी, चीजें ऊपर बताए अनुसार काम करती हैं।

नोड संस्करण 10.2.0
क्रोम संस्करण 66.0.3359.181
इलेक्ट्रॉन संस्करण 3.0.2

window.require त्रुटि के साथ मेरी मुख्य स्क्रिप्ट में मेरे लिए काम नहीं कर रहा था window is not defined , इसलिए मैंने const electron = eval('require')("electron") स्विच किया। आशा है कि यह किसी की मदद करता है। वेबपैक का उपयोग करना, और समस्या यह थी कि वेबपैक संकलन समय पर मेरे आवश्यकता विवरण का मूल्यांकन कर रहा था।

@MarshallOfSound मेरी गलती है।

मुझे समस्या # 7300 में समाधान मिला अगर यह किसी की मदद कर सकता है।

const { ipcRenderer } = window.require('electron');

कृपया ध्यान दें कि जब आप इलेक्ट्रॉन ऐप चलाते हैं तो यह काम करेगा, लेकिन अगर आप ब्राउज़र के अंदर अपने रिएक्ट कोड का परीक्षण करना चाहते हैं तो यह अभी भी क्रैश हो जाएगा (विंडो.require ब्राउज़र में परिभाषित नहीं है क्योंकि यह इलेक्ट्रॉन में है)।

और टाइपप्रति के लिए:

import {IpcRenderer} from 'electron';

declare global {
  interface Window {
    require: (module: 'electron') => {
      ipcRenderer: IpcRenderer
    };
  }
}

const { ipcRenderer } = window.require('electron');

@moshfeu आपका समाधान शानदार काम करता है। मुझे अपने रिएक्ट प्रोजेक्ट में IpcRenderer का उपयोग करने के लिए Webpack या Browserfy की आवश्यकता नहीं है। फिर से बहुत बहुत धन्यवाद :D

टाइपस्क्रिप्ट के लिए और ऊपर से @HemalR के उदाहरण का उपयोग करने के लिए लेकिन बिना nodeIntegration: true : https://github.com/electron/electron/issues/9920#issuecomment -336757899:

ठीक है, मेरे पास समाधान है।

1. कोड के साथ preload.js file बनाएं:

window.ipcRenderer = require('electron').ipcRenderer;

1. इस फ़ाइल को अपने main.js में webPreferences माध्यम से प्रीलोड करें:

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

1. अब, आपके पास अपने रिएक्ट ऐप से एक्सेस होगा। जैसे यह काम करेगा:

componentDidMount() {
      if (isElectron()) {
          console.log(window.ipcRenderer);
          window.ipcRenderer.on('pong', (event, arg) => {
              this.setState({ipc: true})
          })
          window.ipcRenderer.send('ping')
      }
  }

नोट - इसका उपयोग करते हुए: isElectron() फ़ंक्शन के लिए https://github.com/cheton/is-electron

के साथ संयुक्त
https://github.com/electron/electron/issues/9920#issuecomment -447157348

मैंने इसका इस्तेमाल किया:

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    ipcRenderer: IpcRenderer
  }
}

export const { ipcRenderer } = window;

उम्मीद है कि वहाँ किसी की मदद करता है! stenciljs के साथ काम करता है, और मुझे लगता है कि प्रतिक्रिया और कोणीय

बस लक्ष्य जोड़ें: वेबपैक कॉन्फ़िगरेशन में "इलेक्ट्रॉन-रेंडरर"।
निर्यात डिफ़ॉल्ट {
...
लक्ष्य: "इलेक्ट्रॉन-रेंडरर"
...
}

नमस्ते, मैं सीआरए + इलेक्ट्रॉन का उपयोग करता हूं। और मैं लक्ष्य 'इलेक्ट्रॉन-रेंडरर' द्वारा अपनी परियोजना का निर्माण करता हूं। बिल्ड फ़ोल्डर में फ़ाइलें लोड करते समय यह अच्छी तरह से काम करता है, लेकिन जब मैं url localhost:3000 विकसित और लोड करता हूं तो यह त्रुटि फेंकता है। मुझे लगता है कि इसका कारण यह है कि मैं प्रतिक्रिया घटकों में नोड एपीआई और इलेक्ट्रॉन एपीआई का उपयोग करता हूं। किसी के पास समाधान है? धन्यवाद।

TypeError: fs.existsSync is not a function

हाँ, ब्राउज़र में fs एपीआई उपलब्ध नहीं है। अगर मैं स्थिति को सही ढंग से समझता हूं, तो आप react-scripts start (जो सीआरए में npm start की डिफ़ॉल्ट स्क्रिप्ट है) का उपयोग करके अपना ऐप चलाते हैं।

ऐसा करने का सही तरीका electron . चलाना है। आप इसे डॉक्स में देख सकते हैं: https://electronjs.org/docs/tutorial/first-app।

एलएमके अगर यह आपके लिए काम करता है। आप यह भी देख सकते हैं कि यह मेरे ऐप में कैसे काम करता है - https://github.com/moshfeu/y2mp3 (ध्यान दें कि यह सीआरए के साथ नहीं बनाया गया था)

नमस्ते, मैं सीआरए + इलेक्ट्रॉन का उपयोग करता हूं। और मैं लक्ष्य 'इलेक्ट्रॉन-रेंडरर' द्वारा अपनी परियोजना का निर्माण करता हूं। बिल्ड फ़ोल्डर में फ़ाइलें लोड करते समय यह अच्छी तरह से काम करता है, लेकिन जब मैं url localhost:3000 विकसित और लोड करता हूं तो यह त्रुटि फेंकता है। मुझे लगता है कि इसका कारण यह है कि मैं प्रतिक्रिया घटकों में नोड एपीआई और इलेक्ट्रॉन एपीआई का उपयोग करता हूं। किसी के पास समाधान है? धन्यवाद।

TypeError: fs.existsSync is not a function

बस लक्ष्य जोड़ें: वेबपैक कॉन्फ़िगरेशन में "इलेक्ट्रॉन-रेंडरर"।
निर्यात डिफ़ॉल्ट {
...
लक्ष्य: "इलेक्ट्रॉन-रेंडरर"
...
}

यह मेरे लिए भी काम करता है।

यहाँ मेरा उपकरण संस्करण है:

• वेबपैक: "3.8.1"
• इलेक्ट्रॉन: "4.2.1"

मुझे लगता है कि electron-renderer सिर्फ इस इलेक्ट्रॉन समस्या को हल करने के लिए। मुझे window.required जैसे वायर्ड सिंटैक्स का उपयोग करने की आवश्यकता नहीं है, और यह टाइपिंग भी खो गया है!

मेरे लिए लक्ष्य निर्धारित करने का काम किया: वेबपैक और नोड एकीकरण के लिए "इलेक्ट्रॉन-रेंडरिंग": ब्राउज़रविंडो विकल्पों में सच
मैं आज के पिछले संस्करणों के वेबपैक+इलेक्ट्रॉन+प्रतिक्रिया का उपयोग कर रहा हूं

https://github.com/electron/electron/issues/7300#issuecomment -496006781

मैं टाइपस्क्रिप्ट एक इलेक्ट्रॉन के साथ क्रिएट-रिएक्शन-ऐप चला रहा हूं। मैंने सेटअप के लिए इन बहुत अच्छे निर्देशों का पालन किया। लेकिन फिर मैं भी इस त्रुटि में भाग गया। मेरे लिए काम करने वाला समाधान इस सूत्र में कही गई बातों का योग है:

1. प्रतिक्रिया-स्क्रिप्ट का उपयोग "electron-renderer" को target । मैं इसके लिए rescripts साथ rescript-env उपयोग करता हूं।

package.json

  "rescripts": [
    "env"
  ],

.rescriptsrc.js

मॉड्यूल.एक्सपोर्ट्स = [require.resolve(./webpack.config.js")];

webpack.config.js :

module.exports = config => {
  config.target = "electron-renderer";
  return config;
};

1. नोड एकीकरण जोड़ें

new BrowserWindow({
  webPreferences: {
    nodeIntegration: true
  }
});

1. src/typings.d.ts :

declare var window: Window;
interface Window {
  require: any;
}

और आप अंत में आपके ऐप में हैं

App.tsx

const { remote } = window.require("electron");
console.log(remote.getCurrentWindow());

@लुकासबॉम्बैच
यह भी काम करना चाहिए:

declare var window: Window;
interface Window {
  require: NodeRequire
}

फिर आपके पास आवश्यक कास्ट पर टाइपिंग होगी

धन्यवाद!

यहाँ वे चरण हैं जिनका मैंने Vue के लिए उपयोग किया है यदि यह किसी और के लिए उपयोगी है।

सुनिश्चित करें कि ब्राउज़र विंडो बनाते समय इसे वेब प्राथमिकताओं में जोड़कर रेंडरर प्रक्रिया के लिए नोड एकीकरण सक्षम किया गया है:

new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
    },
})
````

Configure webpack to package your application for electron renderer by adding a target to your `vue.config.js` (or wherever you set your vue settings). 
```js
module.exports = {
    configureWebpack: {
        target: 'electron-renderer',
    },
}

अपने आवेदन के भीतर आपको जो चाहिए उसे आयात करें। मैं अपने घटक में खोल मॉड्यूल आयात कर रहा हूँ जैसे:

import { shell } from 'electron'

किसी के लिए अभी भी वही समस्या है। यह अब तक का सबसे अच्छा समाधान है जो मैंने पाया है

```जेएस
नया ब्राउज़रविंडो({
वेब वरीयताएँ: {
नोडएकीकरण: सच
}
});

मुझे आशा है कि इस टिप्पणी पर ध्यान दिया जाएगा, क्योंकि बहुत से लोग आपके ऐप्स में fs या ipcRenderer आयात करने के बारे में पूछ रहे हैं। यह इलेक्ट्रॉन ऐप्स के लिए एक सामान्य आवश्यकता है, लेकिन मैंने पाया कि बहुत से लोगों ने इसे सही नहीं पाया है, और पुराने पैटर्न का उपयोग कर रहे हैं। tl;dr - यदि आप अपने नोड मॉड्यूल (यानी fs ) या इलेक्ट्रॉन मॉड्यूल (यानी ipcRenderer ) को सही तरीके से आयात नहीं करते हैं, तो एक सुरक्षा भेद्यता है। यदि आप केवल अपने लिए अपने ऐप का उपयोग कर रहे हैं तो आप _संभव_ सुरक्षित हैं, लेकिन यदि आप कभी भी अपना ऐप साझा करना या बेचना चाहते हैं तो आपको आगे पढ़ना चाहिए।

हमारा लक्ष्य

इससे पहले कि मैं समाधान में जाऊं, यह समझना महत्वपूर्ण है कि _क्यों_ हम इसे पहले स्थान पर कर रहे हैं। इलेक्ट्रॉन ऐप्स हमें अपने ऐप्स में नोड मॉड्यूल शामिल करने की अनुमति देते हैं, जो उन्हें अद्भुत शक्ति देता है, लेकिन सुरक्षा संबंधी चिंताएं देता है। हम अपने ऐप को नेटिव-ओएस (यानी नोड) सुविधाओं का उपयोग करने की अनुमति देना चाहते हैं, लेकिन हम नहीं चाहते कि उनका दुरुपयोग किया जाए ।

जैसा कि एक टिप्पणी में @raddevus द्वारा लाया गया है, दूरस्थ सामग्री लोड करते समय यह आवश्यक है। यदि आपका इलेक्ट्रॉन ऐप पूरी तरह से ऑफ़लाइन/स्थानीय है, तो आप शायद nodeIntegration:true चालू कर सकते हैं। हालांकि, मैं अभी भी आपके ऐप का उपयोग करने वाले आकस्मिक/दुर्भावनापूर्ण उपयोगकर्ताओं के लिए सुरक्षा के रूप में कार्य करने के लिए nodeIntegration:false रखने का विकल्प चुनूंगा, और किसी भी संभावित मैलवेयर को रोकूंगा जो कभी भी आपकी मशीन पर आपके इलेक्ट्रॉन ऐप के साथ इंटरैक्ट करने और उपयोग करने से रोक सकता है। nodeIntegration:true हमला वेक्टर (अविश्वसनीय रूप से दुर्लभ, लेकिन हो सकता है)!

आसान तरीका

अपने ब्राउज़रविंडो में nodeIntegration: true सेट करने से आपके रेंडरर प्रक्रिया को नोड मॉड्यूल तक पहुंच मिलती है। _यह_ करना असुरक्षित है। आपके पास require("fs") और require("electron") , लेकिन इसका मतलब है कि अगर किसी को XSS भेद्यता मिलनी है, तो वे आपकी रेंडरर प्रक्रिया में आपके द्वारा उजागर की गई कोई भी कमांड चला सकते

अपने कंप्यूटर पर सभी फाइलों को हटाने के बारे में सोचें, या कुछ और जो वास्तव में खराब है।

(वैकल्पिक) आसान तरीका

नोड इंटीग्रेशन को सही पर सेट करने के साथ-साथ, यह संभव है कि आपका ऐप एप्लिकेशन फ़ाइलों को बंडल करने के लिए वेबपैक का उपयोग कर रहा हो। वेबपैक कुछ प्रतीकों के साथ खिलवाड़ करता है, इसलिए target: 'electron-renderer' या वेबपैक एक्सटर्नल जैसी सेटिंग्स आपको इसके बजाय इन चरों ( ipcRenderer ) से गुजरने देती हैं।

फिर भी, आप अपना ऐप कैसे सेट कर रहे हैं, इसके अलावा कुछ भी नहीं बदलता है।

(अन्य-वैकल्पिक) आसान तरीका

आप रिमोट मॉड्यूल का उपयोग कर सकते हैं जो आपको ipcRenderer तक पहुंच प्रदान करता है। यह मूल रूप से एक अलग रूप में 'द आसान तरीका' है। ऐसा करने के लिए इलेक्ट्रॉन की सुरक्षा अनुशंसाओं द्वारा

अर्थात। रिमोट का उपयोग करने से कोई व्यक्ति जेएस-ऑब्जेक्ट के प्रोटोटाइप को संशोधित कर सकता है और आपकी मशीन/ऐप पर कहर बरपा सकता है।

_लगभग_ सही तरीका

@marksyzm का एक बेहतर समाधान है , हालांकि यह सही नहीं है, जहां हम रेंडरर प्रक्रिया में ipcRenderer भेजने के लिए IPC का उपयोग करते हैं। इस प्रकार का सेटअप प्रोटोटाइप प्रदूषण हमलों के लिए भी असुरक्षित है। यदि आप अपने ऐप को वहां से 80% प्राप्त करना चाहते हैं, तो मैं इस पद्धति का उपयोग करूंगा, क्योंकि इसके लिए आपको अधिक रिफैक्टरिंग करने की आवश्यकता नहीं होगी।

सही तरीका

अपने fs / ipcRenderer को अपनी रेंडरर प्रक्रिया में आयात करने का सही तरीका IPC (इंटर-प्रोसेस-कम्युनिकेशन) के साथ है। यह मुख्य और रेंडरर प्रक्रिया के बीच बात करने की अनुमति देने का इलेक्ट्रॉन का तरीका है। टूटा हुआ, इस तरह आपके ऐप को देखने की जरूरत है:

1. एक ब्राउज़रविंडो में preload संपत्ति होती है। यह गुण एक js फ़ाइल है जो require तक पहुंच के साथ लोड होती है (जिसका अर्थ है कि आपको ipcRenderer की आवश्यकता हो सकती है)
2. प्रोटोटाइप प्रदूषण हमलों को रोकने के लिए आपके ब्राउज़रविंडो में contextIsolation: true भी होगा, लेकिन इसका मतलब है कि आपको अपनी रेंडरर प्रक्रिया में आईपीसी रेंडरर पास करने के लिए संदर्भ ब्रिज का उपयोग करने की आवश्यकता है
3. प्रीलोड स्क्रिप्ट और संदर्भ ब्रिज का उपयोग करके, आप अपनी रेंडरर प्रक्रिया को ipcRenderer तक पहुंचने की अनुमति देते हैं
4. अपनी मुख्य स्क्रिप्ट में, आप ipcRenderer ( ipcMain मॉड्यूल में) के लिए श्रोता बनाते हैं। इन श्रोताओं के भीतर आप fs मॉड्यूल का उपयोग कर सकते हैं

_मोटे तौर पर_ ये सभी चरण इस तरह दिखते हैं:

main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // is default value after Electron v5
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js") // use a preload script
    }
  });

  // Load app
  win.loadFile(path.join(__dirname, "dist/index.html"));

  // rest of code..
}

app.on("ready", createWindow);

ipcMain.on("toMain", (event, args) => {
  fs.readFile("path/to/file", (error, data) => {
    // Do something with file contents

    // Send result back to renderer process
    win.webContents.send("fromMain", responseObj);
  });
});

प्रीलोड.जेएस

const {
    contextBridge,
    ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

index.html

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
</head>
<body>
    <script>
        window.api.receive("fromMain", (data) => {
            console.log(`Received ${data} from main process`);
        });
        window.api.send("toMain", "some data");
    </script>
</body>
</html>

कम से कम, मुझे विश्वास है कि आपको इन सुविधाओं के लिए इलेक्ट्रॉन v7 की आवश्यकता है।

मुझे इसके बारे में कैसे पता है?

मुझे सुरक्षित इलेक्ट्रॉन ऐप्स की परवाह है, और सुरक्षा के बारे में सोचने के बजाय बेक-इन सुरक्षा के लिए इलेक्ट्रॉन एप्लिकेशन टेम्पलेट बनाने के लिए secure-electron-template बनाया है।

ऊपर @reZach की टिप्पणी पर निर्माण, मैं निम्नलिखित की तरह कुछ कर रहा हूँ। मुख्य अंतर preload.js में है , जहां मेरा एपीआई ipcRenderer के करीब है।

main.js

let newWindow = null;
function createWindow() {
    newWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: path.join(__dirname, "preload.js")
        }
    });

    newWindow.webContents.on('did-finish-load', () => {
        newWindow.webContents.send('APP_MY_INIT', { data: 'hi' });
    });
}

ipcMain.on('APP_SOMETHING', (event, ...args) => {
    // ...
});

ipcMain.handle('APP_SOMETHING_ELSE', (event, ...args) => {
    // ...
    return myVar;
});

प्रीलोड.जेएस

const { contextBridge, ipcRenderer } = require('electron');

function callIpcRenderer(method, channel, ...args) {
    if (typeof channel !== 'string' || !channel.startsWith('APP_')) {
        throw 'Error: IPC channel name not allowed';
    }
    if (['invoke', 'send'].includes(method)) {
        return ipcRenderer[method](channel, ...args);
    }
    if ('on' === method) {
        const listener = args[0];
        if (!listener) throw 'Listener must be provided';

        // Wrap the given listener in a new function to avoid exposing
        // the `event` arg to our renderer.
        const wrappedListener = (_event, ...a) => listener(...a);
        ipcRenderer.on(channel, wrappedListener);

        // The returned function must not return anything (and NOT
        // return the value from `removeListener()`) to avoid exposing ipcRenderer.
        return () => { ipcRenderer.removeListener(channel, wrappedListener); };
    }
}

contextBridge.exposeInMainWorld(
    'myIpcRenderer', {
        invoke: (...args) => callIpcRenderer('invoke', ...args),
        send: (...args) => callIpcRenderer('send', ...args),
        on: (...args) => callIpcRenderer('on', ...args),
    },
);

क्लाइंट.जेएस

const { myIpcRenderer } = window;

const removeMyListener = myIpcRenderer.on('APP_MY_INIT', data => {
    console.log(data);
    myIpcRenderer.send('APP_SOMETHING', 'foo');
})

async function test() {
    const result = await myIpcRenderer.invoke('APP_SOMETHING_ELSE', 'foo', 'bar');
    console.log(result);
}
test();

if (/* should remove listener === true */) {
    removeMyListener();
}

और टाइपस्क्रिप्ट का उपयोग करने वालों के लिए, type.d.ts

declare global {
    interface Window {
        myIpcRenderer: MyIpcRenderer,
    }
}

export interface MyIpcRenderer {
    invoke(channel: string, ...args: any[]): Promise<any>;
    send(channel: string, ...args: any[]): void;

    /** <strong i="22">@return</strong> A function that removes this listener. */
    on(channel: string, listener: (...args: any[]) => void): () => void;
}

क्या किसी को पता है कि जब मैं इसे preload.js में डालने का प्रयास करता हूं तो मुझे मॉड्यूल त्रुटि क्यों नहीं मिल रही है?

const errorLogging = require('../renderer/utils/errorLogging');

धन्यवाद

@silentlight यह इलेक्ट्रॉन से संबंधित नहीं है, क्या आपके पास शायद अपना खुद का एक जिथब रेपो है जहां बातचीत जारी रह सकती है? (ऐसा लगता है कि require() में आपका पथ सही नहीं है और इसलिए अधिक कोड देखे बिना यह एक त्रुटि फेंक रहा है)।

हालांकि पहले से ही window.require समाधान है, मैं सिर्फ मनोरंजन के लिए अपना साझा करूंगा:

function magic(module){
    require(module)
}

const { ipcRenderer } = magic('electron')

आपके बंडलर यह नहीं पहचानेंगे कि आप मॉड्यूल आयात कर रहे हैं क्योंकि आप ES मॉड्यूल या कॉमनजेएस सिंटैक्स का उपयोग नहीं कर रहे हैं, इसलिए यह इसे बंडल करने का प्रयास नहीं करेगा और इसलिए कोई त्रुटि नहीं होगी

मुझे आश्चर्य है कि किसी ने अभी तक यह कोशिश क्यों नहीं की

@ marc2332 सच है, लेकिन फिर आप सीधे इस जादू के आवरण द्वारा संभावित हमलों के लिए खुद को बेनकाब करते हैं। यह आपके परिदृश्य पर लागू नहीं हो सकता है, लेकिन निश्चित रूप से एक चिंता का विषय है जिस पर आपको विचार करना चाहिए।

@reZach मुझे कोई कारण नहीं दिखता कि

const { ipcRenderer } = eval("require('electron')")

@marc2332 न तो सुरक्षित हैं। मैं बस ध्यान दे रहा हूं, यदि आप दूरस्थ संपत्तियों का उपयोग करते हैं, तो आप इस तरह इंजेक्शन हमलों के लिए खुद को खोल रहे हैं। मैं

धन्यवाद रेज़ाच! मुझे लगता है कि लोग आपके दृष्टिकोण को जल्द ही समझेंगे

या बाद में

मार्क एलफिंस्टन
www.oxfordsourceltd.com

हाय जैच, क्या contextBridge समाधान प्रोटोटाइप का समर्थन करता है?

contextIsolation: false के साथ मेरा मूल कोड बस window पर एक फ़ंक्शन संलग्न करता है। यह फ़ंक्शन Promise<MediaStream> लौटाता है, हालांकि contextBridge के दस्तावेज़ कहते हैं कि प्रोटोटाइप गिरा दिए जाते हैं और जब मैंने contextBridge उपयोग किया तो मुझे एक खाली वस्तु प्राप्त होती है।

क्या प्रोटोटाइप का समर्थन करने का कोई तरीका है लेकिन contextIsolation: true सुनिश्चित करना भी है?

हाय जैच, क्या contextBridge समाधान प्रोटोटाइप का समर्थन करता है?

contextIsolation: false के साथ मेरा मूल कोड बस window पर एक फ़ंक्शन संलग्न करता है। यह फ़ंक्शन Promise<MediaStream> लौटाता है, हालांकि contextBridge के दस्तावेज़ कहते हैं कि प्रोटोटाइप गिरा दिए जाते हैं और जब मैंने contextBridge उपयोग किया तो मुझे एक खाली वस्तु प्राप्त होती है।

क्या प्रोटोटाइप का समर्थन करने का कोई तरीका है लेकिन contextIsolation: true सुनिश्चित करना भी है?

नहीं, ऐसा नहीं है। मैं टीम के सदस्यों में से एक द्वारा याद की गई एक टिप्पणी खोजने की कोशिश कर रहा था कि यह इरादा व्यवहार है लेकिन मैं नहीं कर सका। सबसे अच्छा मैं कह सकता हूं कि इलेक्ट्रॉन v8, ( पीआर 20214 ) में आईपीसी के भीतर वस्तुओं के क्रमांकन में परिवर्तन लाया गया है (प्रभावी रूप से जब संदर्भ अलगाव चालू है) जो समर्थन को छोड़ देगा (वर्तमान में बहिष्कृत, भविष्य के संस्करणों में हटा दिया जाएगा) कार्यों के लिए या प्रोटोटाइप।

नोट: वे ऑब्जेक्ट जो V8 के स्ट्रक्चर्ड क्लोन एल्गोरिथम के साथ क्रमबद्ध नहीं हैं, जैसे कि फ़ंक्शंस, DOM ऑब्जेक्ट, विशेष नोड/इलेक्ट्रॉन ऑब्जेक्ट जैसे process.env या WebContents, या ऐसे आइटम वाले किसी भी ऑब्जेक्ट को पुराने आधार के साथ क्रमबद्ध किया जाएगा :: मान- आधारित एल्गोरिथ्म। हालांकि, यह व्यवहार बहिष्कृत है और इलेक्ट्रॉन 9 से शुरू होने वाले अपवाद को फेंक देगा।

यह शायद वह खबर नहीं है जिसे आप सुनना चाहते थे, लेकिन मुझे आशा है कि मैंने मदद की।

हाय जैच, क्या contextBridge समाधान प्रोटोटाइप का समर्थन करता है?
contextIsolation: false के साथ मेरा मूल कोड बस window पर एक फ़ंक्शन संलग्न करता है। यह फ़ंक्शन Promise<MediaStream> लौटाता है, हालांकि contextBridge के दस्तावेज़ कहते हैं कि प्रोटोटाइप गिरा दिए जाते हैं और जब मैंने contextBridge उपयोग किया तो मुझे एक खाली वस्तु प्राप्त होती है।
क्या प्रोटोटाइप का समर्थन करने का कोई तरीका है लेकिन contextIsolation: true सुनिश्चित करना भी है?

नहीं, ऐसा नहीं है। मैं टीम के सदस्यों में से एक द्वारा याद की गई एक टिप्पणी खोजने की कोशिश कर रहा था कि यह इरादा व्यवहार है लेकिन मैं नहीं कर सका। सबसे अच्छा मैं कह सकता हूं कि इलेक्ट्रॉन v8, ( पीआर 20214 ) में आईपीसी के भीतर वस्तुओं के क्रमांकन में परिवर्तन लाया गया है (प्रभावी रूप से जब संदर्भ अलगाव चालू है) जो समर्थन को छोड़ देगा (वर्तमान में बहिष्कृत, भविष्य के संस्करणों में हटा दिया जाएगा) कार्यों के लिए या प्रोटोटाइप।

नोट: वे ऑब्जेक्ट जो V8 के स्ट्रक्चर्ड क्लोन एल्गोरिथम के साथ क्रमबद्ध नहीं हैं, जैसे कि फ़ंक्शंस, DOM ऑब्जेक्ट, विशेष नोड/इलेक्ट्रॉन ऑब्जेक्ट जैसे process.env या WebContents, या ऐसे आइटम वाले किसी भी ऑब्जेक्ट को पुराने आधार के साथ क्रमबद्ध किया जाएगा :: मान- आधारित एल्गोरिथ्म। हालांकि, यह व्यवहार बहिष्कृत है और इलेक्ट्रॉन 9 से शुरू होने वाले अपवाद को फेंक देगा।

यह शायद वह खबर नहीं है जिसे आप सुनना चाहते थे, लेकिन मुझे आशा है कि मैंने मदद की।

यह दुर्भाग्यपूर्ण है, लेकिन आपके त्वरित उत्तर के लिए धन्यवाद।

मैंने ऊपर उल्लिखित चरणों का पालन किया है ( @reZach और @aplum द्वारा दिया गया), और मैं अपने client.js से preload.js से main.js तक जानकारी भेज रहा हूं।

स्थानीय स्तर पर सब कुछ चलाते समय, संचार काम करता है, लेकिन जब मैं electron-builder चलाता हूं, तो संचार टूट जाता है। उदाहरण के लिए, स्थानीय रूप से चलने पर setBadge() का उपयोग करना आश्चर्यजनक रूप से काम करता है। मैं client.js फ़ाइल से गिनती ले सकता हूं और इसे contextBridge और फिर main.js और सफलतापूर्वक app.dock.setBadge(count) सेट कर रहा हूं। electron-builder साथ बनने के बाद क्या इलेक्ट्रॉन में संचार के साथ मुझे कुछ याद आ रहा है?

"electron": "^8.2.3",
"electron-builder": "^22.4.0",

मेन.जेएस

const { ipcMain } = electron;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        height: height,
        width: width,
        minHeight: 575,
        minWidth: 900,
        center: true,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            spellcheck: true,
            preload: path.join(__dirname, "preload.js")
        },
    });
}

ipcMain.on('SEND_BADGE_COUNT', (e, count) => {
    const badgeCount = count > 0 ? count : '';
    app.dock.setBadge(`${badgeCount}`)
})

प्रीलोड.जेएस

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld(
    'setBadgeCountForElectron', {
        send: (channel, data) => {
            console.log(`Preload ${channel}, ${data}`)
            ipcRenderer.send(channel, data)
        }
    }
)

Client.js

const { setBadgeCountForElectron } = window;

function sendBadgeCount(count) {
  !!setBadgeCountForElectron && setBadgeCountForElectron.send('SEND_BADGE_COUNT', count)
}

sendBadgeCount(count)

पैकेज.जेसन

  "name": "desktop_app",
  "version": "0.1.8-beta",
  "private": true,
  "description": "",
  "homepage": "./",
  "main": "public/electron.js",
  "build": {
    "copyright": "Copyright © 2020 My Company",
    "appId": "com.my-app.app",
    "productName": "My Company",
    "buildVersion": "0.0.1-beta",
    "mac": {
      "category": "public.app-category.utilities",
      "icon": "./public/images/mac-icon.png"
    },
    "win": {
      "icon": "./public/images/windows-icon.png"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },

@SterlingChin , मैं इलेक्ट्रॉन टीम के साथ एक अनुरक्षक नहीं हूं, लेकिन यह इलेक्ट्रॉन-बिल्डर रेपो के लिए एक बेहतर प्रश्न-उपयुक्त हो सकता है।

मुझे लगता है कि यह इलेक्ट्रॉन-बिल्डर के बजाय कोड के साथ एक मुद्दा है, जब मैंने इसके बारे में सोचने के लिए एक पल लिया।

मुझे लगता है कि यह इलेक्ट्रॉन-बिल्डर के बजाय कोड के साथ एक मुद्दा है, जब मैंने इसके बारे में सोचने के लिए एक पल लिया।

मुझे यकीन है कि मुझे कुछ महत्वपूर्ण टुकड़ा याद आ रहा है जो यह सब उम्मीद के मुताबिक काम करेगा। आपकी प्रतिक्रिया के लिए धन्यवाद। मैंने electron-builder रेपो में एक मुद्दा खोला है, लेकिन इसे कोई कर्षण प्राप्त नहीं हुआ है।

मुझे लगता है कि यह इलेक्ट्रॉन-बिल्डर के बजाय कोड के साथ एक मुद्दा है, जब मैंने इसके बारे में सोचने के लिए एक पल लिया।

मुझे यकीन है कि मुझे कुछ महत्वपूर्ण टुकड़ा याद आ रहा है जो यह सब उम्मीद के मुताबिक काम करेगा। आपकी प्रतिक्रिया के लिए धन्यवाद। मैंने electron-builder रेपो में एक मुद्दा खोला है, लेकिन इसे कोई कर्षण प्राप्त नहीं हुआ है।

क्या आपने अपनी समस्या के साथ एमवीपी रेपो बनाया है? यह कभी-कभी मदद करता है और इस प्रक्रिया में आपको एहसास होता है कि क्या हो रहा है।

@Amthieu और @CiriousJoker मैं आप दोनों से प्यार करता हूँ धन्यवाद।

1. यार्न ऐड-डी कस्टमाइज़-सीआरए प्रतिक्रिया-ऐप-रिवायर्ड
2. रिएक्ट-ऐप-रीवायर्ड स्टार्ट ऐप का उपयोग करने के लिए पैकेज.जेसन को संशोधित करें: "स्टार्ट": "ब्राउज़र = कोई भी प्रतिक्रिया-ऐप-रिवायर्ड स्टार्ट नहीं",
3. प्रतिक्रिया ऐप रूट निर्देशिका में फ़ाइल 'कॉन्फ़िगर-ओवरराइड' बनाएं:
   `कॉन्स्ट {ओवरराइड} = आवश्यकता ('कस्टमाइज़-क्रै');

फ़ंक्शन addRendererTarget (कॉन्फ़िगरेशन) {
config.target = 'इलेक्ट्रॉन-रेंडरर';

वापसी विन्यास;
}

मॉड्यूल.एक्सपोर्ट्स = ओवरराइड (addRendererTarget); `

1. अब आप 'इलेक्ट्रॉन' से {ipcRenderer} आयात कर सकते हैं :)

मैं vuejs का उपयोग कर रहा हूं और बस vue.config.js . में कोड जोड़ें

मॉड्यूल.एक्सपोर्ट = {
"पारदर्शी निर्भरता": [
"vuetify"
],
प्लगइनविकल्प: {
इलेक्ट्रॉनबिल्डर: {
नोडएकीकरण: सच
}
}
}

@genilsonmm पवित्र बकवास जिसने काम किया! मैं पिछले 3 घंटे से पागल हो रहा हूं। धन्यवाद!!
उस का विशिष्ट अंश जो मेरे लिए काम करता था वह था
```जावास्क्रिप्ट
प्लगइनविकल्प: {
इलेक्ट्रॉनबिल्डर: {
नोडएकीकरण: सच
}
},

"पारदर्शी निर्भरता": [
"vuetify"
],

यह मुझ पर काम नहीं कर रहा है...लेकिन window.require('electron') अच्छी तरह से काम कर रहा है

उन सभी लोगों के लिए जिन्हें समस्या है "window.require एक फ़ंक्शन नहीं है"

आपने इलेक्ट्रॉन पर एक प्रीलोडेड स्क्रिप्ट बनाई है।

1. उस निर्देशिका पर preload.js नाम की एक फ़ाइल बनाएँ जहाँ आपके पास de इलेक्ट्रॉन मुख्य स्क्रिप्ट है, इस कोड को उस पर रखें:

   window.require = आवश्यकता;

2. अपनी इलेक्ट्रॉन मुख्य स्क्रिप्ट पर जाएं और इसे उस कोड में टाइप करें जहां आप विंडो बनाते हैं:

   जीत = नया ब्राउज़रविंडो ({
   चौड़ाई: 1280,
   ऊंचाई: 720,
   वेब वरीयताएँ: {
   नोड एकीकरण: झूठा,
   प्रीलोड: __dirname + '/preload.js'
   },

   })
   इससे आप स्क्रिप्ट को पहले से लोड कर देंगे, इससे मेरी समस्या ठीक हो गई। मुझे आपसे भी उम्मीद है :)

@reZach आपके समाधान ने मेरे लिए काम किया, लेकिन मैंने एक गलती देखी कि अन्य लोग ठोकर खा सकते हैं (क्योंकि मैंने किया, ओह!):

        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => fn(...args));
            }
        }

आप अपने कॉलबैक फ़ंक्शन को "func" के रूप में परिभाषित करते हैं, लेकिन फिर "fn" पर कॉल करते हैं, यदि आप इसे बदलते हैं, तो यह ठीक उसी तरह काम करता है जैसा आप इसका वर्णन करते हैं।
विस्तृत पोस्ट के लिए बहुत धन्यवाद: +1:

@genilsonmm अगर मैं vue.config.js डालता हूं:

प्लगइनविकल्प: {
इलेक्ट्रॉनबिल्डर: {
नोड एकीकरण: सच,

मुझे त्रुटि मिलती है "आवश्यकता परिभाषित नहीं है":

अगर मैं "नोडइंटीग्रेशन: ट्रू" लाइन पर टिप्पणी करता हूं तो त्रुटि संदेश गायब हो जाता है और ऐप काम करता है।

इसका क्या मतलब है?

@marcoippolito मेरा मानना ​​​​है कि इसका मतलब है कि require का उपयोग करने का प्रयास कर रहा है जो नोड जेएस की मॉड्यूल रिज़ॉल्यूशन विधि है। चूंकि यह उपलब्ध नहीं है यदि आप नोड एकीकरण को अक्षम करते हैं तो कोड निष्पादित नहीं हो सकता है। आपको जो करने की ज़रूरत है वह है ब्राउज़रों को लक्षित करने के लिए अपने वेबपैक कॉन्फ़िगरेशन को संशोधित करना ( var अगर मुझे सही याद है तो लक्ष्य है) और सुनिश्चित करें कि आपका कोई भी कोड नोड एपिस का उपयोग नहीं कर रहा है और त्रुटि दूर होनी चाहिए।

टाइपस्क्रिप्ट का उपयोग करने वालों के लिए आधिकारिक नेक्स्ट.जेएस उदाहरणों में एक अच्छा उदाहरण है:
https://github.com/vercel/next.js/search?q=ipcRenderer&unscoped_q=ipcRenderer

प्रीलोड.ts

/* eslint-disable @typescript-eslint/no-namespace */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { ipcRenderer, IpcRenderer } from 'electron'

declare global {
  namespace NodeJS {
    interface Global {
      ipcRenderer: IpcRenderer
    }
  }
}

// Since we disabled nodeIntegration we can reintroduce
// needed node functionality here
process.once('loaded', () => {
  global.ipcRenderer = ipcRenderer
})

index.tsx

import { useState, useEffect } from 'react'

const Home = () => {
  const [input, setInput] = useState('')
  const [message, setMessage] = useState(null)

  useEffect(() => {
    const handleMessage = (event, message) => setMessage(message)
    global.ipcRenderer.on('message', handleMessage)

    return () => {
      global.ipcRenderer.removeListener('message', handleMessage)
    }
  }, [])

  const handleSubmit = (event) => {
    event.preventDefault()
    global.ipcRenderer.send('message', input)
    setMessage(null)
  }

  return (
    <div>
      <h1>Hello Electron!</h1>
    </div>
  )
}

export default Home

@genilsonmm पवित्र बकवास जिसने काम किया! मैं पिछले 3 घंटे से पागल हो रहा हूं। धन्यवाद!!
उस का विशिष्ट अंश जो मेरे लिए काम करता था वह था

   pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    },

मैं

मेरे पास यह समस्या भी NodeIntegration सक्षम है। दोनों window.require और आवश्यकता काम नहीं करते।

+यह केवल प्रतिक्रिया के साथ होता है, सादा इलेक्ट्रॉन नहीं