[Electron + React] 项目中的 [node_notifier] 问题
Posted
技术标签:
【中文标题】[Electron + React] 项目中的 [node_notifier] 问题【英文标题】:Problem with [node_notifier] in [Electron + React] Project 【发布时间】:2020-01-29 09:08:45 【问题描述】:我决定使用node_notifier 来处理我的电子应用程序的操作系统通知。整个项目基于Electron JS
以及React JS
和package.json
是这样的。
...
"build":
"appId": "pod.talk.land"
,
"main": "public/electron.js",
"homepage": "./",
"dependencies":
"cross-env": "^6.0.0",
"electron-is-dev": "^1.1.0",
"node-notifier": "^6.0.0",
"podauth": "^1.2.4",
"podchatweb": "^0.48.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.2"
,
"scripts":
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""
,
"devDependencies":
"concurrently": "^4.1.2",
"electron": "^6.0.10",
"electron-builder": "^21.2.0",
"wait-on": "^3.3.0"
项目树结构如下:
- Project
| + node_modules
|
| - public
| | + assets
| | * electron.js
| | * index.html
|
| - src
| | * App.js
| | * App.css
| | * index.js
|
| * package.json
问题是,当我尝试在App.js
中使用node_notifier
时,如下所示:
const notifier = require('node-notifier');
notifier.notify('Some Notification');
它抛出一个错误并说:
TypeError: net.connect is not a function
at push../node_modules/node-notifier/lib/checkGrowl.js.module.exports (checkGrowl.js:14)
at Growl.push../node_modules/node-notifier/notifiers/growl.js.Growl.notify (growl.js:70)
at onNewMessage (App.js:40)
at t.value (index.js:11702)
at commitLifeCycles (react-dom.development.js:21157)
at commitLayoutEffects (react-dom.development.js:24138)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at commitRootImpl (react-dom.development.js:23903)
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at commitRoot (react-dom.development.js:23723)
at runRootCallback (react-dom.development.js:22809)
at react-dom.development.js:11886
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at flushSyncCallbackQueueImpl (react-dom.development.js:11881)
at flushSyncCallbackQueue (react-dom.development.js:11869)
at scheduleUpdateOnFiber (react-dom.development.js:22667)
at Object.enqueueSetState (react-dom.development.js:13710)
at l.b.setState (index.js:38267)
at l.onStateChange (index.js:2630)
at g (index.js:18791)
at index.js:43241
at index.js:147155
at dispatch (index.js:18928)
at e.onMessageEvents (index.js:6864)
at Object.ad7ed17e-d748-476c-9fbf-70153cf3f50f (index.js:123573)
at fireEvent (index.js:126717)
at newMessageHandler (index.js:125444)
at chatMessageHandler (index.js:124885)
at receivedAsyncMessageHandler (index.js:124870)
at Object.0d539f41-9266-4489-e794-c3b154d86521 (index.js:124458)
at Z (index.js:128606)
at U (index.js:128520)
at Object.message (index.js:128451)
at WebSocket.r.onmessage (index.js:128722)
包作者在其项目的问题部分中提到了这一点:
这似乎是从 Webpack 或类似的东西运行的?在电子内部或页面上。在任何情况下,节点通知程序都需要在节点上下文中运行,并且可以访问子进程。
我应该如何在节点上下文中运行和构建代码? ????
【问题讨论】:
【参考方案1】:您可以在创建主 BrowserWindow 时使用 webPreferences 中的 preload 参数。 在 main.js 中,
mainWindow = new BrowserWindow(
webPreferences:
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js')
)
在 preload.js 中
window.notify= function notify(msg)
return require('node-notifier').notify(msg);
;
通过这种方式,您可以避免弹出 webpack 并访问您的 react 项目中的电子/节点功能。
【讨论】:
谢谢,发生错误是因为我试图在 React 环境中使用节点模块,这显然不是节点环境,所以我使用 IPC 消息从渲染器进程发送data
到作为电子/节点环境的主进程。现在错误消失了?以上是关于[Electron + React] 项目中的 [node_notifier] 问题的主要内容,如果未能解决你的问题,请参考以下文章
electron+react-redux-saga基础项目配置