如何在反应中导入 ipcRenderer？
Posted
技术标签:
【中文标题】如何在反应中导入 ipcRenderer？【英文标题】：How to import ipcRenderer in react? 【发布时间】：2018-06-17 07:08:35 【问题描述】：我尝试在 react 应用中导入 ipcRenderer
import ipcRenderer from 'electron';
但我收到此错误消息：require is not defined
【问题讨论】：
导入看起来不错，我猜是您的环境设置不正确 你有没有把electron包添加到你项目的package.json中并用npm / yarn安装了？
是的，添加了电子
【参考方案1】：
const ipcRenderer = require('electron')
【讨论】：
当我使用 require 时，它会抛出 fs.existsSync is not a function 错误 你能评论你所有的代码并单独使用这一行并检查它是否抛出任何错误【参考方案2】：你需要使用
const ipcRenderer = window.require("electron");
否则它将尝试从 Webpack 或您使用的任何模块捆绑器中导入它。
您可以查看此线程以获得更好的解释：
https://github.com/electron/electron/issues/7300
【讨论】：
ES6 中的替代方案是什么 我认为不存在替代方案，因为您需要明确声明window。【参考方案3】：
您需要按照我在this comment 中概述的步骤进行操作。这些步骤确保您的电子应用程序的安全性。
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);
);
);
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) => fn(...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>
【讨论】：
在 preload.js 中应该是：ipcRenderer.on(channel, (event, ...args) => func(...args));【参考方案4】：如果您希望在反应组件中快速尝试电子中的 IPC，这可能会有所帮助。
main.js
const ipcMain = require('electron')
ipcMain.on('asynchronous-message', (event, arg) =>
console.log("heyyyy",arg) // prints "heyyyy ping"
)
App.js
import React from 'react';
import './App.css';
const ipcRenderer = window.require('electron');
function App()
return (
<div className="App">
<button onClick=()=>
ipcRenderer.send('asynchronous-message', 'ping')
>Com</button>
</div>
);
export default App;
输出：
进行更改后不要忘记重新运行应用程序。
没有添加 preload.js，没有改变 webpack 配置中的任何内容，没有额外的配置。
【讨论】：
我收到Uncaught TypeError: window.require is not a function
@AngelS.Moreno：相关讨论github.com/electron/electron/issues/9920#issuecomment-797143298【参考方案5】：
下面是使用 electron-forge 和 react 和预加载脚本的代码，该脚本使用 webpack preload（仅供参考，检查下面的 package.json 代码）选项将 ipcRenderer API 暴露给电子渲染器进程。点击链接为electron-forge with react创建一个项目。
main.js
const app, BrowserWindow, ipcMain, Notification = require("electron");
const path = require("path");
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require("electron-squirrel-startup"))
// eslint-disable-line global-require
app.quit();
const createWindow = () =>
console.log(__dirname, "testing");
// Create the browser window.
const mainWindow = new BrowserWindow(
width: 800,
height: 600,
webPreferences:
nodeIntegration: false,
contextIsolation: true,
worldSafeExecuteJavaScript: true,
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
,
);
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools();
;
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", () =>
console.log("/n demo", __dirname, "/n");
createWindow();
);
ipcMain.on("notify", (_, message) =>
new Notification( title: "Notification", body: message ).show();
);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", () =>
if (process.platform !== "darwin")
app.quit();
);
app.on("activate", () =>
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0)
createWindow();
);
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.
package.json
"name": "webex-ui",
"productName": "webex-ui",
"version": "1.0.0",
"description": "My Electron application description",
"main": ".webpack/main",
"scripts":
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
,
"keywords": [],
"author":
"name": "Sathishkumar R",
"email": "rsathishtechit@gmail.com"
,
"license": "MIT",
"config":
"forge":
"packagerConfig": ,
"makers": [
"name": "@electron-forge/maker-squirrel",
"config":
"name": "webex_ui"
,
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
,
"name": "@electron-forge/maker-deb",
"config":
,
"name": "@electron-forge/maker-rpm",
"config":
],
"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"
]
]
]
,
"devDependencies":
"@babel/core": "^7.14.8",
"@babel/preset-react": "^7.14.5",
"@electron-forge/cli": "^6.0.0-beta.58",
"@electron-forge/maker-deb": "^6.0.0-beta.58",
"@electron-forge/maker-rpm": "^6.0.0-beta.58",
"@electron-forge/maker-squirrel": "^6.0.0-beta.58",
"@electron-forge/maker-zip": "^6.0.0-beta.58",
"@electron-forge/plugin-webpack": "6.0.0-beta.58",
"@vercel/webpack-asset-relocator-loader": "1.6.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.0.0",
"electron": "13.1.7",
"node-loader": "^2.0.0",
"style-loader": "^3.0.0"
,
"dependencies":
"electron-squirrel-startup": "^1.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
app.jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component
componentDidMount()
electron.notificationApi.sendNotification("My custom message!");
render()
return <h1>contextBridge</h1>;
ReactDOM.render(<App />, document.body);
preload.js
const ipcRenderer, contextBridge = require("electron");
contextBridge.exposeInMainWorld("electron",
notificationApi:
sendNotification(message)
ipcRenderer.send("notify", message);
,
,
batteryApi: ,
fileApi: ,
);
renderer.js
import "./index.css";
import "./app";
console.log(
'? This message is being logged by "renderer.js", included via webpack'
);
另外，在 webpack.rules.js
中添加以下内容//to avoid explicit mention of jsx when importing react components
resolve:
extensions: [".js", ".jsx"],
,
感谢this page
【讨论】：
我正在使用 eletron-forge TS+webpack+react 获得'worldSafeExecuteJavaScript' does not exist in type 'WebPreferences'.
在 Electron 14 中，worldSafeExecuteJavaScript 将被删除。没有其他选择，请确保您的代码在启用此属性的情况下工作。从 Electron 12 开始默认启用它。请参考electronjs.org/docs/latest/breaking-changes。我【参考方案6】：
通过contextBridge我们可以解决这个问题
new BrowserWindow(
width: 1200,
height: 800,
backgroundColor: "white",
webPreferences:
nodeIntegration: false,
worldSafeExecuteJavaScript: true,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
)
//example to display notification
ipcMain.on('notify', (_, message) =>
new Notification(title: 'Notification', body: message).show();
)
preload.js
const ipcRenderer, contextBridge = require('electron');
contextBridge.exposeInMainWorld('electron',
notificationApi:
sendNotification(message)
ipcRenderer.send('notify', message);
)
然后在您的 reactjs 组件中使用以下代码将触发原生通知消息
electron
.notificationApi
.sendNotification('My custom message!');
【讨论】：
这似乎是一个不错的方向，但是你在最后一个文件中从哪里导入电子呢？它说“电子未定义”electron 得到一个全局对象，在我们预加载 js 文件后不需要任何 import 语句。以上是关于如何在反应中导入 ipcRenderer？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 vue.js 中导入 ipcRenderer？ __dirname 未定义