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

Question

我尝试从打字稿中的电子获取 ipcRenderer 模块，以将信息从当前组件发送到核心并将信息返回到窗口（电子铬浏览器）。 通过将 ts-code 转码为 ES5，我得到的只是一个错误“找不到模块”。

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

更新：错误是在“找不到模块”和这个之间切换：

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 模块，直接在 html 文件中加载/链接。

在那里它起作用了。 为什么？

Answer 1

搜索 10 小时后问题解决。 问题是 webpack 转码器。

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

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

Answer 2

由于浏览器应用程序中的电子依赖不是真实的，这意味着它不是从 node_modules 中 webpacked 而是在运行时加载的，require 语句导致错误，例如我找不到“fs”。

但是，您可以通过以下方式欺骗打字稿：

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

此外，如果您正在编写一个 Web 应用程序，当它在内部运行时仅由电子增强，这是一种更好的方法，因为您不必仅在使用通信部分时将电子添加为您的 Web 应用程序的依赖项。

Answer 3

比我尝试在 ES5 文件中使用 electron.ipcRenderer 模块，直接在 html 文件中加载/链接。

如果它在html 中工作但在ts 中失败，则意味着错误不在const ipc = require('electron').ipcRenderer; . 该错误最可能出现在您必须从 html 加载文件（而不是require('electron') ）的导入中。

Answer 4

这为我解决了问题：

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

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

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

Answer 5

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

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