Ich arbeite an einer Node.js-App, die die "0.34.3" -Version von Electron verwendet.
Das Problem, das ich habe, ist, dass, wenn ich versuche, das 'electron'-Modul in einen Renderer-Prozess wie folgt einzubinden, require('electron').remote;
und wenn ich npm start
-- bekomme ich die folgende Fehlermeldung:
{ [Error: Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect']
stream:
Labeled {
_readableState:
ReadableState {
objectMode: true,
highWaterMark: 16,
buffer: [],
length: 0,
pipes: [Object],
pipesCount: 1,
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
defaultEncoding: 'utf8',
ranOut: false,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null,
resumeScheduled: false },
readable: true,
domain: null,
_events:
{ end: [Object],
error: [Object],
data: [Function: ondata],
_mutate: [Object] },
_eventsCount: 4,
_maxListeners: undefined,
_writableState:
WritableState {
objectMode: true,
highWaterMark: 16,
needDrain: false,
ending: true,
ended: true,
finished: true,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
bufferedRequest: null,
lastBufferedRequest: null,
pendingcb: 0,
prefinished: true,
errorEmitted: false },
writable: true,
allowHalfOpen: true,
_options: { objectMode: true },
_wrapOptions: { objectMode: true },
_streams: [ [Object] ],
length: 1,
label: 'deps' } }
[11:36:40] js error Cannot find module 'electron' from '/Users/waley/code/PROJECT/src/connect
Irgendeine Idee, was los ist? Danke!
es gibt einige Möglichkeiten, den Import von Elektronenmodulen in Bezug auf API-Änderungen in Electron 1.0 zu beheben.
Bitte beachten Sie, dass dies in der Regel bei Bundlern wie webpack der Fall ist, die die require
-Funktion überschreiben.
target
-Eigenschaft von WebpackWenn Sie eine aktuelle Version von Webpack als Bundler verwenden, fügen Sie hinzu
target: 'electron-renderer'
zu deiner config solltest du verwenden:
import 'electron' from electron;
electron
außerhalb Ihres Builds<!-- electron declaration -->
<script>
const electron = require('electron');
</script>
<!-- your app build -->
<script src="dist/bundle.js"></script>
Auf diese Weise kann ich von überall auf electron
zugreifen.
window.require
Electron hat das Objekt window
erweitert, sodass Sie Folgendes verwenden können:
const electron = window.require('electron');
var remote = require('remote');
var app = remote.app; // to import the app module, for example
Ich habe diese Fehlermeldung erhalten, als ich vergessen hatte, "main": "./main.js",
irgendwo vor den Skripts package.json
hinzuzufügen. Für ein vollständiges Setup folgen Sie diesem großartigen tutorial
Bearbeiten:
Hier ist eine Zusammenfassung dieses Links:
Electron installieren
npm install electron --save-dev
Update index.html
Die generierte Stammseite in Angular zeigt die Basis auf /. Dies verursacht später Probleme mit Electron. Aktualisieren wir es jetzt. Fügen Sie einfach einen Punkt vor dem Schrägstrich in src/index.html hinzu.
<base href="./">
Elektron konfigurieren
Erstellen Sie eine neue Datei mit dem Namen main.js
im Stamm Ihres Projekts (auf derselben Ebene wie package.json
) - dies ist das Electron NodeJS-Backend. Dies ist der Einstiegspunkt für Electron und definiert, wie unsere Desktop-App auf verschiedene Ereignisse reagiert, die über das Desktop-Betriebssystem ausgeführt werden.
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})
win.loadURL(`file://${__dirname}/dist/index.html`)
//// uncomment below to open the DevTools.
// win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
Fügen Sie main.js
und benutzerdefinierte Skripts zu package.json
..__ hinzu. Ihr package.json
sollte in etwa wie folgt aussehen:
{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js", // <-- update here
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .", // <-- run electron
"electron-build": "ng build --prod && electron ." // <-- build app, then run electron
},
// ...omitted
}
Führen Sie den Befehl aus, um ein Elektron zu erstellen und zu starten
npm run electron-build