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

Question

I try to get the ipcRenderer module from electron in typescript to send informations from the current component to the core and to get informations back to the window (electron-chromium-browser). All I get is a error "Module not found" by transcoding the ts-code to ES5.

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

Update: The Error is switching between the "Module not found" and this one:

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

That is from the current electron-api . I have also tried to use the import syntax from typescript but the result is the same.

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

There it worked. Why?

Answer 1

Solved the problem after 10h searching. Problem was the webpack-transcoder.

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

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

Answer 2

Since electron dependency in the browser app is not real, meaning it's not webpacked from node_modules but instead loaded in runtime, the require statement caused errors such as "fs" not found for me.

However you can trick the typescript with this:

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

Also if you are writing a web app, which only is augmented by electron when it's running inside, this is a better way since you don't have to add electron as a dependency to your webapp just when using the communication parts.

Answer 3

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

If it works in html but fails in ts it means the error is not in const ipc = require('electron').ipcRenderer; . The error is most likey in the import you have to load your file from html (and not require('electron') ).

Answer 4

This solved the problem for me:

You can fix it, just add to the "package.json"

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

Source: https://github.com/angular/angular-cli/issues/8272#issuecomment-392777980

Answer 5

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

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