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

【问题标题】：how to load electron module in typescript如何在打字稿中加载电子模块
【发布时间】：2016-04-11 03:23:44
【问题描述】：

我尝试从打字稿中的电子获取 ipcRenderer 模块，以将信息从当前组件发送到核心并将信息返回到窗口（电子铬浏览器）。通过将 ts 代码转码为 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 文件中加载/链接。

成功了。为什么？

【问题讨论】：

你试过使用支持 TS 和 ES6 等的电子编译模块吗？
另一个问答解决了我的问题：stackoverflow.com/questions/62467092/…

标签： javascript node.js typescript ipc electron

【解决方案1】：

解决了经过 10 小时搜索后的问题。问题出在 webpack 转码器上。

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

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

【讨论】：

你能解释一下你是如何修复它的吗？ :)
就我而言，我使用 webpack 将 typescript 代码转码为 es5，这样我就有了一个 webpack.config.js-File。在该配置中，您必须将孔配置通过webpackTargetElectronRenderer(config) 发送到config.target。它应该是这样的：var config = {.....}; config.target = webpackTargetElectronRenderer(config); module.exports = config;

【解决方案2】：

由于浏览器应用程序中的电子依赖不是真实的，这意味着它不是从 node_modules 打包的，而是在运行时加载的，因此 require 语句导致了诸如“fs”之类的错误。

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

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

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

【讨论】：

谢谢，这不是一个明显的记录不足。我一直在为此寻找几个小时。我觉得可能有一个更优雅的解决方案，但这让我再次感动。
我不知道为什么当await import('electron') 不起作用时它会起作用，但是在花了一整天的时间之后我不会质疑它

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这解决了我的问题：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：