Electron: 반응에서 전자를 가져오는 중 오류 | '전자'에서 { ipcRenderer } 가져오기

CRA는 표준 모듈 로딩(fs 포함)을 엉망으로 만드는 웹팩을 사용합니다.

webpack의 Electron 모드를 살펴보고 CRA에서 꺼내는 것이 좋습니다.

GitHub 문제는 기능 요청 및 버그 보고용이며 Electron 사용에 대한 질문은 커뮤니티 또는 Slack 채널로 보내야 합니다.

@MarshallOfSound 내 실수.

누군가를 도울 수 있다면 문제 #7300에서 해결책을 찾았습니다.

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

이것은 Electron 앱을 실행할 때 작동하지만 브라우저 내에서 React 코드를 테스트하려는 경우 여전히 충돌합니다(window.require는 Electron에서와 같이 브라우저에서 정의되지 않음).

app.quit()에 액세스하려면 다음을 사용할 수 있습니다.

const { 앱 } = window.require('전자').remote;

누군가에게 도움이 될지도...

@CiriousJoker 이것은 솔루션입니다, 감사합니다!

나는 여전히 window.require is not a function 받고 있습니다. 저는 React Starter Kit(https://github.com/kriasoft/react-starter-kit)와 함께 Electron을 사용하고 있습니다. 이것을 제외하고는 모든 것이 잘 작동합니다.

웹에서 앱을 로드하도록 Electron 앱을 설정했으므로 앱이 로컬에서 실행되지 않습니다.
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

내가하려는 것은 내 React 파일 중 하나에서 ipcRenderer 를 호출하는 것입니다. 내 앱이 웹에서 로드될 때도 가능한지 확실하지 않습니다. 어떤 제안?

@holgersindbaek

당신과 같은 배에서... 당신은 해결책을 찾았습니까?

아니요. 브라우저에서 ipcRenderer를 로드할 수 없다고 확신합니다.

브라우저에서 React 앱을 실행하는 경우 작동하지 않습니다. Electron 내부에서 실행하면 괜찮을 것입니다.

@Amthieu 조언 감사합니다. 나는 여전히 내 React 프로젝트(React Starter Kit 기반)를 Electron에서 실행하는 방법에 대해 확신이 서지 않습니다. 조언을 주시면 감사하겠습니다.

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

네, 해결 방법이 있습니다.

1) 다음 코드로 preload.js file 생성:

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

2) webPreferences 를 통해 main.js에 이 파일을 미리 로드합니다.

  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!"); 

그러나 React 리스너로부터 아무 것도 수신되지 않았습니다.

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();

와우, 내 React 구성 요소에서 작동하는 IPCRenderer를 얻을 수 없습니다. 위의 모든 방법을 시도했습니다. 혹시 내가 작동하는 데 사용할 수 있는 힌트가 있으신가요? 감사

흠... 내 전자 앱은 위의 솔루션을 사용하여 여전히 잘 작동하지만 몇 달 동안 업데이트하지 않았습니다(필요하지 않음).

이것이 작동하지 않도록 하는 주요 변경 사항이 있는지 궁금합니다. 전자 버전을 게시할 수 있습니까?

@cyclonstep 발생한 특정 오류가 있습니까? 코드 조각이나 일부 로그 없이는 돕기 어렵습니다...

내가 사용하고 소포를 묶어.
Window.require는 또한 나를 위해 그것을 해결했습니다 (또한 보여주지 않은 것을 보여줌).

'vue/dist/vue.min'에서 Vue 가져오기
'./App'에서 앱 가져오기

// 나쁜? '전자'에서 { ipcRenderer } 가져오기
// 나쁜? const { ipcRenderer } = 요구('전자')
// 좋은:
const { ipcRenderer } = window.require('전자')

(동일한 파일의 더 아래에는 전자 "pong-Demo"가 있습니다 . 이는 일종의 증명, 작동합니다)

아마도 주목할 만합니다. 잘못했을 때에도 번들 크기는 전체 Electron 크기만큼 증가하지 않지만(electron-require가 없는 것과 비교합니다. 이것은 지금까지 저의 첫 번째이자 유일한 렌더 측 전자 가져오기입니다) 약 20kb 정도만 증가합니다. , node_modules/electron-download/node_modules/debug/dist/debug.js :242:ff에서 오는 자체적으로 일부 shim/wrapper 코드인 것 같습니다.

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") 로 전환했습니다. 이것이 누군가를 돕기를 바랍니다. webpack을 사용하고 문제는 webpack이 컴파일 시간에 내 require 문을 평가하고 있다는 것입니다.

@MarshallOfSound 내 실수.

누군가를 도울 수 있다면 문제 #7300에서 해결책을 찾았습니다.

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

이것은 Electron 앱을 실행할 때 작동하지만 브라우저 내에서 React 코드를 테스트하려는 경우 여전히 충돌합니다(window.require는 Electron에서와 같이 브라우저에서 정의되지 않음).

그리고 타이프스크립트의 경우:

import {IpcRenderer} from 'electron';

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

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

@moshfeu 귀하의 솔루션은 훌륭하게 작동합니다. 내 React 프로젝트에서 IpcRenderer를 사용하기 위해 Webpack이나 Browserfy가 필요하지 않습니다. 다시한번 감사드립니다 :D

typescript의 경우 위의 @HemalR 예제를 사용하지만 nodeIntegration: true 없이 : https://github.com/electron/electron/issues/9920#issuecomment -336757899:

네, 해결 방법이 있습니다.

1. 다음 코드를 사용하여 preload.js file 생성:

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

1. webPreferences 를 통해 이 파일을 main.js에 미리 로드하세요.

  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와 함께 작동하며 반응 및 각도를 상상합니다.

webpack 설정에서 target: "electron-renderer"를 추가하기만 하면 됩니다.
기본 내보내기 {
...
대상: "전자 렌더러"
...
}

안녕하세요, 저는 CRA + Electron을 사용하고 있습니다. 그리고 '전자 렌더러'를 대상으로 프로젝트를 빌드합니다. 빌드 폴더에서 파일을 로드하는 동안 잘 작동하지만 url localhost:3000 개발하고 로드할 때 오류가 발생합니다. 그 이유는 반응 구성 요소에서 node api와 electron api를 사용하기 때문인 것 같습니다. 누구에게나 해결책이 있습니까? 감사 해요.

TypeError: fs.existsSync is not a function

예, fs API는 브라우저에서 사용할 수 없습니다. 상황을 올바르게 이해했다면 react-scripts start (CRA에서 npm start 의 기본 스크립트)를 사용하여 앱을 실행합니다.

이를 수행하는 올바른 방법은 electron . 를 실행하는 것입니다. 문서에서 볼 수 있습니다: https://electronjs.org/docs/tutorial/first-app.

그것이 당신을 위해 작동한다면 LMK. 내 앱에서 어떻게 작동하는지 확인할 수도 있습니다. - https://github.com/moshfeu/y2mp3 (CRA로 생성되지 않았음을 참고

안녕하세요, 저는 CRA + Electron을 사용하고 있습니다. 그리고 '전자 렌더러'를 대상으로 프로젝트를 빌드합니다. 빌드 폴더에 파일을 로드하는 동안 잘 작동하지만 localhost:3000 url을 개발하고 로드할 때 오류가 발생합니다. 그 이유는 반응 구성 요소에서 node api와 electron api를 사용하기 때문인 것 같습니다. 누구에게나 해결책이 있습니까? 감사 해요.

TypeError: fs.existsSync is not a function

webpack 설정에서 target: "electron-renderer"를 추가하기만 하면 됩니다.
기본 내보내기 {
...
대상: "전자 렌더러"
...
}

저에게도 효과가 있습니다.

내 도구 버전은 다음과 같습니다.

• 웹팩: "3.8.1"
• 전자: "4.2.1"

내 생각 electron-renderer 이 문제 야 같이 유선 구문을 사용할 필요가 없습니다 전자 해결 단지에 대해 window.required , 그리고 심지어 손실 입력을!

나를 위해 설정 대상: webpack 및 nodeIntegration에 대한 "전자 렌더링": BrowserWindow 옵션에서 true
오늘 최신 버전의 webpack+electron+react를 사용하고 있습니다.

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

TypeScript와 Electron을 사용하여 create-react-app을 실행하고 있습니다. 나는 설정을 위해 이 아주 좋은 지침 을 따랐습니다. 그러나 나는 또한이 오류에 부딪쳤다. 나를 위해 작동하는 솔루션은 이 스레드에서 말한 내용의 합계입니다.

1. 반응 스크립트가 "electron-renderer" 를 target 합니다. 이를 위해 rescripts 와 함께 rescript-env 를 사용합니다.

package.json

  "rescripts": [
    "env"
  ],

.rescriptsrc.js

module.exports = [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());

@LucasBombach
이것도 작동해야 합니다.

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

그런 다음 필요한 consts를 입력해야 합니다.

감사 해요!

Vue가 다른 사람에게 도움이 되는 경우를 대비하여 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'

여전히 같은 문제가 있는 사람에게. 이것은 내가 지금까지 찾은 최고의 솔루션입니다

```js
새 브라우저 창({
웹 기본 설정: {
nodeIntegration: 참
}
});

많은 사람들이 귀하의 앱에서 fs 또는 ipcRenderer 가져오기에 대해 묻고 있기 때문에 이 댓글이 주목받기를 바랍니다. 전자 앱에 대한 일반적인 요구 사항이지만 많은 사람들이 올바르게 이해하고 구식 패턴을 사용하고 있지 않다는 것을 알았습니다. tl;dr - 노드 모듈(예: fs ) 또는 전자 모듈(예: ipcRenderer )을 올바른 방법으로 가져오지 않으면 보안 취약점이 있습니다. 앱을 자신만을 위해 사용하는 경우 _아마도_ 안전하지만 앱을 공유하거나 판매하려는 경우 미리 읽어야 합니다.

우리의 목표

솔루션에 들어가기 전에 먼저 우리가 이 작업을 수행하는 _이유_를 이해하는 것이 중요합니다. Electron 앱을 사용하면 앱에 노드 모듈을 포함할 수 있으므로 놀라운 성능을 제공하지만 보안 문제가 발생합니다. 우리는 앱이 기본 OS(즉, 노드) 기능을 사용하도록 허용하고 싶지만 남용 되는

@raddevus 가 주석에서 언급 nodeIntegration:true 켜도 괜찮습니다. 그러나 나는 여전히 nodeIntegration:false 를 유지하여 앱을 사용하는 우발적/악의적인 사용자를 보호하고 컴퓨터에 설치될 수 있는 가능한 맬웨어가 전자 앱과 상호 작용하고 nodeIntegration:true 공격 벡터(매우 드물지만 발생할 수 있음)!

쉬운 방법

BrowserWindow에서 nodeIntegration: true 를 설정하면 렌더러 프로세스가 노드 모듈에 액세스할 수 있습니다. _이것_을 하는 것은 취약합니다. require("fs") 및 require("electron") 액세스할 수 있지만 이는 누군가 XSS 취약점을 발견하면 렌더러 프로세스에서 노출된 모든 명령 을

컴퓨터에 있는 모든 파일을 삭제하거나 정말 나쁜 것을 삭제하는 것을 생각해 보십시오.

(대체) 쉬운 방법

nodeIntegration을 true로 설정하는 것과 함께 앱이 웹팩을 사용하여 애플리케이션 파일을 묶을 가능성이 있습니다. Webpack은 특정 기호를 엉망으로 만들기 때문에 target: 'electron-renderer' 또는 webpack 외부와 같은 설정을 사용하면 이러한 변수( ipcRenderer )를 대신 앱에 전달할 수 있습니다.

그래도 앱을 설정하는 방법 외에는 아무 것도 변경되지 않습니다.

(다른 대안) 쉬운 방법

ipcRenderer 대한 액세스를 제공하는 원격 모듈 을 사용할 수 있습니다. 기본적으로 다른 형태의 '쉬운 방법'입니다. Electron의 보안 권장 사항에서는 이러한 유형의 공격이 프로토타입 오염 벡터에 영향을 받기 때문에 권장하지 않습니다 .

즉. 원격을 사용하면 누군가가 js-object의 프로토타입을 수정하고 컴퓨터/앱에서 큰 혼란을 일으킬 수 있습니다.

_거의_ 올바른 방법

@marksyzm 은 완벽하지는 않지만 더 나은 솔루션을 가지고 있습니다. 여기서 IPC를 사용하여 ipcRenderer 를 렌더러 프로세스에 보냅니다. 이러한 유형의 설정은 프로토타입 오염 공격에도 취약합니다. 앱을 80% 정도 가져오려면 이 방법을 사용합니다. 리팩토링을 많이 할 필요가 없기 때문입니다.

옳은 길

fs / ipcRenderer 를 렌더러 프로세스로 가져오는 올바른 방법은 IPC(프로세스 간 통신)를 사용하는 것입니다. 이것은 메인 프로세스와 렌더러 프로세스 사이에 대화를 허용하는 Electron의 방식입니다. 분해하면 다음과 같이 앱이 표시되어야 합니다.

1. BrowserWindow에는 preload 속성이 있습니다. 이 속성은 require 대한 액세스 권한으로 로드되는 js 파일입니다(즉, ipcRenderer가 필요할 수 있음).
2. BrowserWindow에는 프로토타입 오염 공격을 방지하기 위한 contextIsolation: true 있지만 이는 ipcRenderer를 렌더러 프로세스에 전달하기 위해 contextBridge 를 사용해야 함을 의미합니다.
3. 사전 로드 스크립트와 contextBridge를 사용하여 렌더러 프로세스가 ipcRenderer 에 액세스하도록 허용합니다.
4. 기본 스크립트에서 ipcRenderer( ipcMain 모듈에서)에 대한 리스너를 생성합니다. 이 리스너 내에서 fs 모듈을 사용할 수 있습니다.

_대략_ 이 모든 단계는 다음과 같습니다.

메인.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);
  });
});

preload.js

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 에 있습니다.

메인.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;
});

preload.js

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),
    },
);

클라이언트.js

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();
}

그리고 TypeScript를 사용하는 사람들을 위해 types.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 이것은 전자와 관련이 없습니다. 대화를 계속할 수 있는 자신만의 github 저장소가 있습니까? ( require() 의 경로가 올바르지 않은 것 같습니다. 그래서 더 많은 코드를 보지 않고 오류가 발생합니다.)

이미 window.require 솔루션이 있지만 재미를 위해 제 솔루션을 공유하겠습니다.

function magic(module){
    require(module)
}

const { ipcRenderer } = magic('electron')

번들러는 ES 모듈이나 CommonJS 구문을 사용하지 않기 때문에 모듈을 가져올 때 식별하지 않으므로 번들을 시도하지 않으므로 오류가 발생하지 않습니다.

왜 아직 아무도 이것을 시도하지 않았는지 궁금합니다 😆

@marc2332 사실이지만 이 마법 래퍼의 잠재적인 공격에 직접 노출됩니다. 귀하의 시나리오에 적용되지 않을 수도 있지만 확실히 고려해야 할 사항입니다.

@reZach 솔직히 window.require가 더 안전한 이유가 없습니다. Btw, 그것을하는 더 더러운 방법이 있습니다.

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

@marc2332 둘 다 안전하지 않습니다. 원격 자산을 사용하는 경우 이러한 방식으로 주입 공격에 노출될 수 있습니다. 😄

감사합니다 reZach! 사람들이 당신의 접근 방식을 더 빨리 이해하게 될 것이라고 생각합니다.

또는 나중에

마크 엘핀스톤
www.oxfordsourceltd.com

Zach님, contextBridge 솔루션이 프로토타입을 지원합니까?

나의 원래의 코드 contextIsolation: false 단순히에 기능 부착 window . 이 함수는 Promise<MediaStream> 반환하지만 contextBridge 문서에는 프로토타입이 삭제되고 contextBridge 사용할 때 빈 객체가 수신된다고 나와 있습니다.

프로토타입을 지원하면서도 contextIsolation: true 보장하는 방법이 있습니까?

Zach님, contextBridge 솔루션이 프로토타입을 지원합니까?

나의 원래의 코드 contextIsolation: false 단순히에 기능 부착 window . 이 함수는 Promise<MediaStream> 반환하지만 contextBridge 문서에는 프로토타입이 삭제되고 contextBridge 사용할 때 빈 객체가 수신된다고 나와 있습니다.

프로토타입을 지원하면서도 contextIsolation: true 보장하는 방법이 있습니까?

아니오, 그렇지 않습니다. 팀원 중 한 명이 이것이 의도된 행동이라는 의견을 찾으려고 노력했지만 찾을 수 없었습니다. 내가 말할 수 있는 최선은 Electron v8( 20214 년

참고: 함수, DOM 개체, process.env 또는 WebContents와 같은 특수 Node/Electron 개체 또는 이러한 항목을 포함하는 모든 개체와 같이 V8의 구조적 복제 알고리즘으로 직렬화할 수 없는 개체는 이전 base::Value-로 직렬화됩니다. 기반 알고리즘. 그러나 이 동작은 더 이상 사용되지 않으며 Electron 9부터 예외가 발생합니다.

이것은 당신이 듣고 싶었던 소식이 아닐 수도 있지만 도움이 되었기를 바랍니다.

Zach님, contextBridge 솔루션이 프로토타입을 지원합니까?
나의 원래의 코드 contextIsolation: false 단순히에 기능 부착 window . 이 함수는 Promise<MediaStream> 반환하지만 contextBridge 문서에는 프로토타입이 삭제되고 contextBridge 사용할 때 빈 객체가 수신된다고 나와 있습니다.
프로토타입을 지원하면서도 contextIsolation: true 보장하는 방법이 있습니까?

아니오, 그렇지 않습니다. 팀원 중 한 명이 이것이 의도된 행동이라는 의견을 찾으려고 노력했지만 찾을 수 없었습니다. 내가 말할 수 있는 최선은 Electron v8( 20214 년

참고: 함수, DOM 개체, process.env 또는 WebContents와 같은 특수 Node/Electron 개체 또는 이러한 항목을 포함하는 모든 개체와 같이 V8의 구조적 복제 알고리즘으로 직렬화할 수 없는 개체는 이전 base::Value-로 직렬화됩니다. 기반 알고리즘. 그러나 이 동작은 더 이상 사용되지 않으며 Electron 9부터 예외가 발생합니다.

이것은 당신이 듣고 싶었던 소식이 아닐 수도 있지만 도움이 되었기를 바랍니다.

안타깝지만 빠른 답변 감사합니다.

위에서 설명한 단계( @reZach 및 @aplum 제공)를 수행했으며 client.js 에서 preload.js 에서 main.js 있습니다.

모든 것을 로컬에서 실행하면 통신이 작동하지만 electron-builder 실행하면 통신이 끊어집니다. 예를 들어 setBadge() 하면 로컬에서 실행될 때 훌륭하게 작동합니다. client.js 파일에서 카운트를 가져와 contextBridge 로 전달된 다음 main.js 되고 app.dock.setBadge(count) 성공적으로 설정하는 것을 볼 수 있습니다. electron-builder 로 빌드한 후 Electron의 통신에서 누락된 것이 있습니까?

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

메인.js

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}`)
})

프리로드.js

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

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

클라이언트.js

const { setBadgeCountForElectron } = window;

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

sendBadgeCount(count)

패키지.json

  "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 리포지토리에서 문제를 열었지만 관심을 받지 못했습니다.

문제로 MVP 저장소를 만들었습니까? 그것은 때때로 도움이 되고 그 과정에서 무슨 일이 일어나고 있는지 깨닫게 됩니다.

@Amthieu 와 @CiriousJoker 둘 다 사랑합니다 감사합니다.

1. 원사 추가 -D 사용자 정의-크라 반응-앱 재연결
2. react-app-rewired 시작 앱을 사용하도록 package.json 수정: "start": "BROWSER=none react-app-rewired start",
3. 반응 앱 루트 디렉토리에 'config-overrides' 파일 생성:
   `const { 재정의 } = require('customize-cra');

기능 addRendererTarget(구성) {
config.target = '전자 렌더러';

반환 구성;
}

module.exports = 재정의(addRendererTarget);`

1. 이제 '전자'에서 { ipcRenderer}를 가져올 수 있습니다 :)

vuejs를 사용하고 vue.config.js에 코드를 추가하기만 하면 됩니다.

module.exports = {
"transpileDependencies": [
"뷰티파이"
],
플러그인 옵션: {
전자 빌더: {
nodeIntegration: 참
}
}
}

@genilsonmm 효과가
나를 위해 일한 특정 부분은
```자바스크립트
플러그인 옵션: {
전자 빌더: {
nodeIntegration: 참
}
},

"transpileDependencies": [
"뷰티파이"
],

그것은 나에게 작동하지 않습니다 ... 그러나 window.require('electron')는 잘 작동합니다

"window.require는 함수가 아닙니다"라는 문제가 있는 모든 사람들을 위해

전자에 preoload 스크립트를 생성해야 합니다.

1. 전자 메인 스크립트가 있는 디렉토리에 preload.js라는 이름의 파일을 만들고 이 코드를 넣습니다.

   window.require = 필요;

2. 전자 메인 스크립트로 이동하여 창을 생성하는 코드에 다음을 입력합니다.

   승리 = 새로운 BrowserWindow({
   너비: 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를 넣으면 :

플러그인 옵션: {
전자 빌더: {
nodeIntegration: 참,

"require is not defined" 오류가 발생합니다.

"nodeIntegration: true" 줄을 주석 처리하면 오류 메시지가 사라지고 앱이 작동합니다.

무슨 뜻인가요?

@marcoippolito webpack 번들 코드가 node js의 모듈 확인 방법인 require 를 사용하려고 한다는 뜻이라고 생각합니다. 노드 통합을 비활성화하면 사용할 수 없으므로 코드를 실행할 수 없습니다. 당신이해야 할 것은 대상 브라우저로 웹팩 설정을 (수정입니다 var 내 기억이 맞다 경우 대상) 및 노드 API를 사용하여 코드 중 하나에 해당하지 않는지 확인하고 오류 멀리 가야한다.

TypeScript를 사용하는 사람들을 위해 공식 Next.js 예제에 좋은 예제가 있습니다.
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 효과가
나를 위해 일한 특정 부분은

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

正解, 标记

NodeIntegration이 활성화된 상태에서도 이 문제가 있습니다. window.require 및 require 모두 작동하지 않습니다.

+ 이것은 일반 전자가 아닌 반응에서만 발생합니다.