我正在尝试运行一款旧的Electron应用程序,但我无法确定要使用哪个Node版本,也无法确定需要更新哪个配置文件/依赖项中的部分。
我在Windows中添加了Electron的webPreferences
,但没有起到帮助作用。
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
contextIsolation: false,
enableRemoteModule: true,
},
有人有任何建议要先检查什么?我应该尝试在当前应用程序状态下修复警告,还是应该更新依赖项,然后修复主要故障?
yarn dev
yarn run v1.22.19
$ webpack-dev-server --hot --watch --config webpack.config.dev.js
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from http://localhost:8080/
i 「atl」: Using typescript@3.4.4 from typescript
i 「atl」: Using tsconfig.json from ./tsconfig.json
i 「atl」: Using typescript@3.4.4 from typescript
i 「atl」: Using tsconfig.json from ./tsconfig.json
i 「atl」: Checking started in a separate process...
i 「atl」: Time: 3514ms
i 「atl」: Checking started in a separate process...
i 「atl」: Time: 2355ms
‼ 「wdm」: Hash: 4697290ef706a2a99ad5e1b5fab076995682e95f
Version: webpack 4.30.0
Child
Hash: 4697290ef706a2a99ad5
Time: 17242ms
Built at: 2023-05-24 15:55:15
Asset Size Chunks Chunk Names
bundle.js 6.53 MiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/mousetrap/mousetrap.js] 33.1 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-redux/es/index.js] 416 bytes {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./src/index.tsx] 7.99 KiB {main} [built]
+ 695 hidden modules
WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
@ ./node_modules/fluent-ffmpeg/index.js
@ ./src/common/Util.js
@ ./src/views/Duplicates.tsx
@ ./src/index.tsx
Child
Hash: e1b5fab076995682e95f
Time: 13857ms
Built at: 2023-05-24 15:55:11
Asset Size Chunks Chunk Names
background.js 4.33 MiB main [emitted] main
Entrypoint main = background.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./background.ts 52 bytes {main} [built]
[./background.ts] 1010 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
[./src/background/BackgroundWindow.ts] 10.1 KiB {main} [built]
[./src/main/Logger.js] 1010 bytes {main} [built]
[querystring] external "querystring" 42 bytes {main} [built]
+ 586 hidden modules
WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
@ ./node_modules/fluent-ffmpeg/index.js
@ ./src/background/ScreenshotEngine.ts
@ ./src/background/BackgroundWindow.ts
@ ./background.ts
WARNING in ./node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fsevents' in '.\node_modules\chokidar\lib'
@ ./node_modules/chokidar/lib/fsevents-handler.js
@ ./node_modules/chokidar/index.js
@ ./src/background/Watcher.ts
@ ./src/background/BackgroundWindow.ts
@ ./background.ts
i 「wdm」: Compiled with warnings.
控制台:
Uncaught ReferenceError: require is not defined
at eval (external_"querystring":1:18)
at Object.querystring (bundle.js:8870:1)
at __webpack_require__ (bundle.js:703:30)
at fn (bundle.js:77:20)
at Object.eval (webpack:///(:8080/webpack)-dev-server/client?:6:19)
at eval (webpack:///(:8080/webpack)-dev-server/client?:299:30)
at ./node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (bundle.js:7798:1)
at __webpack_require__ (bundle.js:703:30)
at fn (bundle.js:77:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:1:1)
yarn start
yarn run v1.22.19
$ cross-env NODE_ENV=development electron .
process.env.NODE_ENV: development
Done in 72.06s.
控制台:
bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
.\node_modules\electron\dist\resources\electron.asar\renderer\security-warnings.js:170 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
节点
$ nvm list
16.10.0
14.21.3
14.17.0
12.4.0
* 10.15.3 (Currently using 64-bit executable)
10.8.0
10.3.0
9.11.2
8.9.4
编辑:
我使用 node 10.15.3,因为 chatgpt 基于依赖列表建议我使用这个版本,而 readme 表明要使用 node > 8。但我不知道该用哪个版本,也不知道要优先更新哪个依赖项。 我应该从 electron 开始,然后是 webpack 和 typescript 吗?还是从 fluent-ffmpeg、chokidar 和 fsevents 这样带有警告的依赖项开始呢?
此外,是否有任何关于 JavaScript 依赖项兼容性的集中参考资料?或者有没有工具可以帮助我识别冲突并解决它们?
编辑 2:
我无法在 electron 5 和 node 12.18 中使用 renderer.js
获取 node 版本,而 example 是针对 electron 24 的。
yarn dev
(控制台)
renderer.js:2 Uncaught ReferenceError: versions is not defined
yarn start
(控制台)
.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177 Unable to load preload script: .\preload.js
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177
.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178 TypeError: Cannot read property 'exposeInMainWorld' of undefined
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178
renderer.js:2 Uncaught ReferenceError: versions is not defined
at renderer.js:2
编辑3:
我取得了一些“进展”。将 electron 更新到 v6 后,我遇到了以下错误:Error: contextBridge API can only be used when contextIsolation is enabled
我尝试在窗口中重新启用上下文隔离:contextIsolation: true,
然后我几乎得到了我想要的结果:此应用程序正在使用 Chrome(v76.0.3809.146)、Node.js(v12.4.0)和 Electron(v6.1.12)
除了我正在使用 node v12.18,因为 electron 发布文档建议使用该版本。
然后我尝试再次在 index.html
中加载应用程序包,引用:
./dist/bundle.js
http://localhost:8080/bundle.js
但我仍然遇到相同的错误:
yarn start
:bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
yarn dev
:Uncaught ReferenceError: require is not defined
是因为我需要使用contextBridge
和ipcRenderer
将IpcHandlers和src/common/目录下的所有文件在preload.js
文件中移动和公开吗?
contextBridge.exposeInMainWorld('Constants', {
IpcEvents: () => ipcRenderer.invoke('IpcEvents'),
ping: () => ipcRenderer.invoke('ping')
})
还是说这是一个完全不同的问题,比如一些缺失的路径或webpack配置相关的问题?
我尝试在main.js
中添加一个ping处理程序,但是我得到了一个错误ipcMain.handle不是一个函数
。我阅读了IPC模式,但是一次性完全理解它们太难了,特别是在应用程序中的使用方式。
此外,electron v6 在沙盒渲染器中require() node内置模块不再隐式加载远程版本。 我应该在js和ts/x文件中将所有的require
替换为require('electron').remote.require
吗?还是只在客户端进行替换?
yarn start
可以工作,但是我在 DevTool 控制台中收到以下错误消息(并且应用程序没有正确渲染):Failed to load resource: net::ERR_CONNECTION_REFUSED bundle.js:1
- belgaceaCannot read property 'exposeInMainWorld' of undefined
,说明在 Electron 5 中没有contextBridge
API,这与 Chat GPT 告诉我的相反。实际上,我在 v6 中找到了它,所以可以试一下。 - Dan Macakbundle.js
时仍然遇到相同的错误。 - belgacea,它确实是它所说的,
handle不存在。相反,您可以使用
on或
addListener`。顺便说一句,为了将来,我建议使用typescript,因为这是您第二次错过无效的方法调用。 - Dan Macak