如何在打字稿中加载电子模块

Question

我尝试从打字稿中的电子获取 ipcRenderer 模块，以将信息从当前组件发送到核心，并将信息返回到 window（电子铬浏览器）。通过将 ts 代码转码为 ES5，我得到的只是一个错误 "Module not found"。

const ipc = require('electron').ipcRenderer;`

更新： 错误是在 "Module not found" 和这个之间切换：

ERROR in ./~/electron/index.js Module build failed: Error: ENOENT, open '/.../node_modules/electron/index.js' @ ./app/components/search/search.ts 12:10-29

即来自当前electron-api。我也尝试过使用 typescript 的导入语法，但结果是一样的。

比起我尝试在 ES5 文件中使用 electron.ipcRenderer 模块，loaded/linked 直接在 html 文件中使用。

成功了。为什么？

Answer 1

Than I tried to use the electron.ipcRenderer module in a ES5-file, loaded/linked directly in the html-file.

如果它在 html 中有效但在 ts 中失败，则表示错误不在 const ipc = require('electron').ipcRenderer; 中.该错误最可能发生在您必须从 html（而不是 require('electron')）加载 您的文件 的导入中。

Answer 2

解决搜索 10 小时后的问题。问题是 webpack-transcoder.

https://github.com/chentsulin/webpack-target-electron-renderer

https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js

Answer 3

由于浏览器应用程序中的电子依赖不是真实的，这意味着它不是从 node_modules webpacked 而是在运行时加载的，因此 require 语句导致错误，例如 "fs" not found for me。

但是你可以用这个来欺骗打字稿：

if (typeof window['require'] !== "undefined") { let electron = window['require']("electron"); let ipcRenderer = electron.ipcRenderer; console.log("ipc renderer", ipcRenderer); }

此外，如果您正在编写一个网络应用程序，只有当它在运行内部时才会被电子增强，这是一个更好的方法，因为您不必将电子作为依赖项添加到您的网络应用程序中使用通信部件时

Answer 4

这解决了我的问题：

你可以修复它，只需添加到“package.json”

"browser": {
"fs": false,
"path": false,
"os": false }

来源：https://github.com/angular/angular-cli/issues/8272#issuecomment-392777980

Answer 5

你可以用这个来欺骗 ts（肮脏的 hack，但它有效）：

const { ipcRenderer } = (window as any).require("electron");

如何在打字稿中加载电子模块

how to load electron module in typescript

javascript

ipc

node.js

typescript

electron