Je travaille sur une application Node.js utilisant la version "0.34.3" d'Electron.
Le problème que je rencontre est que lorsque j'essaie d'inclure le module 'électron' dans un processus de rendu comme suit: require('electron').remote;
et lorsque je npm start
--, l'erreur suivante apparaît:
{ [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
Une idée de ce qui se passe? Merci!
il existe plusieurs façons de résoudre les problèmes d'importation de modules electron concernant Modifications de l'API dans Electron 1.0 .
Veuillez noter que cela se produit généralement avec un bundle tel que webpack qui annule la fonction require
.
target
de WebpackSi vous utilisez une version récente de Webpack en tant qu’ensemble, ajoutez
target: 'electron-renderer'
à votre config devrait vous laisser utiliser:
import 'electron' from electron;
electron
en dehors de votre construction<!-- electron declaration -->
<script>
const electron = require('electron');
</script>
<!-- your app build -->
<script src="dist/bundle.js"></script>
De cette façon, je peux accéder à electron
de n’importe où.
window.require
Electron a étendu l'objet window
afin que vous puissiez utiliser:
const electron = window.require('electron');
var remote = require('remote');
var app = remote.app; // to import the app module, for example
J'ai eu cette erreur quand j'ai oublié d'ajouter "main": "./main.js",
à package.json
quelque part avant les scripts . Pour une installation complète, suivez ce superbe tutoriel
Modifier:
Voici un résumé de ce lien:
Installer Electron
npm install electron --save-dev
Mise à jour index.html
La page racine générée dans Angular pointe la base href vers/- cela causera des problèmes avec Electron ultérieurement, alors mettons-le à jour maintenant. Ajoutez juste un point devant la barre oblique dans src/index.html.
<base href="./">
Configure Electron
Créez un nouveau fichier nommé main.js
à la racine de votre projet (au même niveau que package.json
) - il s’agit du backend Electron NodeJS. Il s’agit du point d’entrée pour Electron et définit la réaction de notre application de bureau aux divers événements exécutés via le système d’exploitation de bureau.
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()
}
})
Ajoutez main.js
et les scripts personnalisés à package.json
. Votre package.json
devrait ressembler à ceci:
{
"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
}
Exécutez la commande pour construire et lancer electron
npm run electron-build